Expandable List Help

**skiracer721** · 06-28-2012, 02:46 PM

I got this out off of another thread, but I have a question about it. I'm creating an expandable/collapsible list, using this code, but I need the list to be collapsed when you first come onto the page (instead of expanded, like it is now).

I'm obviously a complete beginner at web development, and I just need to know because I'm just creating a new website for our department.

Thanks!

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>Sliding panel</title>

        <script type="text/javascript">



var sliderIntervalId = 0;

var sliderHeight = 232;

var sliding = false;

var slideSpeed = 10;

function Slide()

{

   if(sliding)

      return;

   sliding = true;

   if(sliderHeight == 232)

      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 >= 232)

   {

      sliding = false;

      sliderHeight = 232;

      slider.style.height = '232px';

      clearInterval(sliderIntervalId);

   }

   else

   {

      sliderHeight += slideSpeed;

      if(sliderHeight > 232)

         sliderHeight = 232;

      slider.style.height = sliderHeight + 'px';

   }

}



</script>

    </head>

    <body>

        <div style="position: relative; width: 270px; height: 250px; margin-bottom: 5px;">

        <div style="position: absolute; width: 270px; height: 18px; left: 0px; top: 0px; background-color: #ffffff; border: 1px solid #ffffff; color: #000000; cursor: pointer;" onclick="Slide();">

        <strong>College of Arts &amp; Humanities</strong>

        </div>

        <div id="exampleSlider" style="position: absolute; top: 18px; left: 0px; width: 250px; height: 232px; border: 1px solid #ffffff; color: #000000; overflow: hidden;">

        <p>

        CONTENT WILL GO HERE<br />

        CONTENT WILL GO HERE<br />

        CONTENT WILL GO HERE</p>

        </div>

        </div>

    </body>

</html>

**David Harrison** · 07-07-2012, 05:42 PM

Two changes, alter the following lines as shown:

Code:

var sliderHeight = 0;

<div id="exampleSlider" style="position: absolute; top: 18px; left: 0px; width: 250px; height: 0; border:

Just so you know, this script seems very fragile since you have to know the exact height of the container that's sliding, and confusingly you have to enter this in multiple locations throughout the code. Also, as written, you could only use this on a page for 1 slider.

Thread: Expandable List Help

Thread Tools

Display

Expandable List Help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions