www.webdeveloper.com
Results 1 to 2 of 2

Thread: Expandable List Help

  1. #1
    Join Date
    Jun 2012
    Posts
    3

    Expandable List Help

    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> 

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,275
    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.
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles