Ok try this code. NOTE: You are violating key best practices by having all of your CSS integrated directly with the HTML. It's best to have a separate CSS file with the attributes for specified classes/ids.
<script type="text/javascript">
var sliderIntervalId = 0;
var sliderHeight = 0;
var sliding = false;
var slideSpeed = 15;
function Slide()
{
if(sliding)
return;
sliding = true;
if(sliderHeight == 200)
sliderIntervalId = setInterval('SlideUpRun()', 30);
else
sliderIntervalId = setInterval('SlideDownRun()', 30);
}
function SlideUpRun()
{
slider = document.getElementById('exampleSlider');
$('#expand').html('<br>[+]');
if(sliderHeight <= 0)
{
sliding = false;
sliderHeight = 0;
slider.style.height = '0px';
clearInterval(sliderIntervalId);
}
else
{
sliderHeight -= slideSpeed;
if(sliderHeight < 0)
sliderHeight = 0;
slider.style.height = sliderHeight + 'px';
}
}
function SlideDownRun()
{
slider = document.getElementById('exampleSlider');
$('#expand').html('<br>[x]');
if(sliderHeight >= 200)
{
sliding = false;
sliderHeight = 200;
slider.style.height = '200px';
clearInterval(sliderIntervalId);
}
else
{
sliderHeight += slideSpeed;
if(sliderHeight > 200)
sliderHeight = 200;
slider.style.height = sliderHeight + 'px';
}
}
</script>
</head>
<body>
<div style="position:relative;width:250px;height:250px;margin-bottom:0px;">
<div style="position:absolute;width:615px;height:48px;left:0px;text-align:center;
top:0px;background-color:#3B587A;color:#FFFFFF;border:0px solid #FFFFFF;">
<p>
<font size="4" font face="calibri" color="white"><b>Discover why you should choose us as your
Lender for life         </b></font>
</p>
<div id="expand" style="position:absolute;width:48px;height:48px;right:0px;
top:0px;background-color:#85A1C2;text-align:center;
border-left:0px solid #FFFFFF;color:#000000;cursor:pointer;size:12px;face:georgia;color:white;style:bold;" onclick="Slide();"><br>
[+]
</div>
</div>
<div id="exampleSlider" style="position:absolute;top:48px;left:0px;
width:604px;height:0px;background-color:#C5DAE7;padding-left:5px;padding-right:5px;
border:0px solid #FFFFFF;color:#000000;overflow:hidden;">
<p>
<font size="2" font face="ebrima" color="black">There are many Lenders out there,
but we are confident that we are the right choice for you:
<ul>
<li>Our <b>Customer Service</b> is unmatched - striving for 100% satisfaction on everything that we do </li>
<li>Our <b>Interest Rates, Private Mortgage Insurance Rates, & Fees</b> are extremely competitive - saving you time and money</li>
<li>Our <b>Availability</b> is exactly what you need - providing constant communication with night & weekend availability</li>
<li>Our <b>Flexibility</b> is exactly what you want - providing electronic & paper documentation options</li>
</ul>
</p>
</div>
</div>
</body>
Here is a JSFiddle Demo