www.webdeveloper.com
Results 1 to 10 of 10

Thread: Expandible/collapsible list

  1. #1
    Join Date
    Jul 2010
    Posts
    1

    Expandible/collapsible list

    Hi,
    I'm developing an intranet site using Dreamweaver and, as a newbie, I don't have lots of experience. I'm trying to create an expandible/collapsible list using HTML/CSS. For example, in the following list I want the user to be able to click on "Procedures", which would then expand to display the documents.

    • Procedures
    • Document 1
  2. Document 2
  • Templates
  • Document 1
  • Document 2


  • I've tried several solutions that I found online, but haven't had any luck. Does anyone have any recommendations?

    Thanks.
  • #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The 'click' action would require JavaScript rather than pure CSS.
    There are a huge number of solutions, be more specific with your requirements.

  • #3
    Join Date
    Mar 2010
    Posts
    2,803
    maybe use this as a starting point

    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:250px;height:250px;margin-bottom:5px;">
      <div style="position:absolute;width:250px;height:18px;left:0px;
           top:0px;background-color:#3B587A;border:1px solid #FFFFFF;">
        <div style="position:absolute;width:18px;height:18px;right:0px;
              top:0px;background-color:#85A1C2;text-align:center;
              border-left:1px solid #FFFFFF;color:#000000;
              cursor:pointer;padding:0px;" onclick="Slide();">
     
                X
           
        </div>
      </div>
      <div id="exampleSlider" style="position:absolute;top:18px;left:0px;
           width:250px;height:232px;background-color:#A6BBCD;
           border:1px solid #FFFFFF;color:#000000;overflow:hidden;">
    <p>
              Click the 'X' in the top-right corner 
              to expand and contract this sliding panel.
    </p>  
      </div>
    </div>
     
    </body>
    </html> 

  • #4
    Join Date
    Jul 2009
    Posts
    91
    You don't need Javascript to do this:

    http://www.yourwebskills.com/dropdownpractice.php

    That's part of an incomplete revamp of my site and could still be tweaked but it should help.

  • #5
    Join Date
    Mar 2010
    Posts
    2,803
    or another option:

    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>
    <
    meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <
    title></title>
     
    <
    style type="text/css">
    <!--

    ul {
    list-
    style-typenone}
    .
    more_content {
    margin10px 0px 0px 50px;
    padding5px 5px 5px 5px;
    width200px;
    height100px;
    border1px solid black;
    overflowauto;
    displaynone}
     
    -->
    </
    style>
     
    <
    script type="text/javascript">
    <!--

    function 
    showMore(link_id,elemId) {
        
    linkObj document.getElementById(link_id);
        
    //display the more content for this elemId
        
    document.getElementById(elemId).style.display='block';
        
    //change the links attributes to hide the more content
        
    linkObj.href 'javascript:hideMore("'+link_id+'","'+elemId+'")';
        
    linkObj.innerHTML "Show less";
    }
     
    function 
    hideMore(link_id,elemId) {
        
    linkObj document.getElementById(link_id);
        
    //hide the more content for this elemId
        
    document.getElementById(elemId).style.display='none';
        
    //change the links attributes to show the more content
        
    linkObj.href 'javascript:showMore("'+link_id+'","'+elemId+'")';
        
    linkObj.innerHTML "Show more";
    }

    -->
    </script>
     
    </head>
    <body>
    <div>
        <ul>
            <li>
               <div>
                   <a id="m1_link" href="javascript:showMore('m1_link','m1_cont')">Show more</a>
                   <div id="m1_cont" class="more_content">More 1 content</div>
               </div>
            </li>
            <li>
               <div>
                   <a id="m2_link" href="javascript:showMore('m2_link','m2_cont')">Show more</a>
                   <div id="m2_cont" class="more_content">More 2 content</div>
               </div>
            </li>
            <li>
               <div>
                   <a id="m3_link" href="javascript:showMore('m3_link','m3_cont')">Show more</a>
                   <div id="m3_cont" class="more_content">More 3 content</div>
               </div>
            </li>
            <li>
                <div>
                   <a id="m4_link" href="javascript:showMore('m4_link','m4_cont')">Show more</a>
                   <div id="m4_cont" class="more_content">More 4 content</div>
               </div>
            </li>
        </ul>
    </div>
     
    </body>
    </html> 

  • #6
    Join Date
    Aug 2010
    Posts
    2
    Hi,

    I'm new too, and I think this is a similar query to the one I have. I too am using Dreamweaver, though in code view.

    I'm trying to develop some help pages and would like to use some sort of expanding page

    For example:

    I can't login >> Do you have an account? >> Yes (answer)
    >> No (Answer)
    Does this solve your problem? Yes/No (as appropriate).

    I have a few such questions which I'd like to display, and when the user clicks on the relevant problem, the first question will appear, and depending on whether they answer yes or no, the next step in the process will appear.

    Does this make sense?

  • #7
    Join Date
    Jul 2009
    Posts
    91
    Personally I think AJAX would work best here but as a beginner that won't help much. A series of linked pages is by far the easiest way to go.

    Between those extremes would be Javascript revealing things depending on what was clicked on. That would be fairly easy (use CSS to visibility:hidden the content then Javascript to reveal the one you want shown via the DOM.).

    If any of that made sense you are probably ready to have a go at it. I'd be happy to help but I am far from great at Javascript so it might be best to let someone else do it.

  • #8
    Join Date
    Aug 2010
    Posts
    2
    DaiLaughing, Thank you very much for your reply; I'll try it tomorrow when back in work.

    I'm not totally sure I understand (I get the logistics, but not so sure how to put it into Javascript) but I'll certainly have a go!

  • #9
    Join Date
    Jun 2012
    Posts
    3
    Quote Originally Posted by tirna View Post
    maybe use this as a starting point

    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:250px;height:250px;margin-bottom:5px;">
      <div style="position:absolute;width:250px;height:18px;left:0px;
           top:0px;background-color:#3B587A;border:1px solid #FFFFFF;">
        <div style="position:absolute;width:18px;height:18px;right:0px;
              top:0px;background-color:#85A1C2;text-align:center;
              border-left:1px solid #FFFFFF;color:#000000;
              cursor:pointer;padding:0px;" onclick="Slide();">
     
                X
           
        </div>
      </div>
      <div id="exampleSlider" style="position:absolute;top:18px;left:0px;
           width:250px;height:232px;background-color:#A6BBCD;
           border:1px solid #FFFFFF;color:#000000;overflow:hidden;">
    <p>
              Click the 'X' in the top-right corner 
              to expand and contract this sliding panel.
    </p>  
      </div>
    </div>
     
    </body>
    </html> 
    Thanks for this helpful code. I was wondering how you would have the content be hidden until you click on the X, instead of having it showing at first.

  • #10
    Join Date
    Dec 2011
    Posts
    163
    could you just put something like this in the anchor tag for the parent link...

    HTML Code:
    $(this).childNode.css({display:block;});
    would that work?

  • 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