Jquery function slide need collapsed on page load (No coding experience but in a bind!)

StackOverflow https://stackoverflow.com/questions/22457935

  •  16-06-2023
  •  | 
  •  

Question

First of all I apologize but I have no coding experience. I have a friend helping me with my home page on my personal website, but he had to leave for a few weeks because of his mother's failing health. In the mean time I need to get my personal webpage updated and I unfortunately have no one to turn to. He already finished everything but there is one piece that I need changed. There is a table that has a header and another cell next to it with a [+] that when clicked runs a slide function to display another box below it full of text.

The problem is that when the page loads the box that appears when you click the [x] is already displayed. I want it to be opposite. I want the page to load with just the header and the table cell with a [+] shown and a person would actually have to click the [x] to have the slide function run and the box of text to then be displayed. Can anyone point me in the right direction to get this done? Here is the code:

<script type="text/javascript">

var sliderIntervalId = 0;
var sliderHeight = 200;
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');
    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');
    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&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</b></font>
 </p>
     <div 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;" onclick="Slide();">

             <font size:12px font face="georgia" color="white"><br><b>[x]</b>

     </div>
   </div>
   <div id="exampleSlider" style="position:absolute;top:48px;left:0px;
        width:604px;height:199px;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>
 </html>
Was it helpful?

Solution

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&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top