Expandible/collapsible list

**elissag** · 07-21-2010 08:02 AM

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

**Fang** · 07-22-2010 04:49 AM

The 'click' action would require JavaScript rather than pure CSS.
There are a huge number of solutions, be more specific with your requirements.

**tirna** · 07-22-2010 04:56 AM

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>

**DaiLaughing** · 07-22-2010 07:57 AM

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.

**tirna** · 07-23-2010 06:03 AM

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-type: none}
.more_content {
margin: 10px 0px 0px 50px;
padding: 5px 5px 5px 5px;
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto;
display: none}
 
-->
</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>

**elliebop** · 08-02-2010 06:58 AM

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?

**DaiLaughing** · 08-02-2010 08:57 AM

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.

**elliebop** · 08-04-2010 03:30 PM

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!

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

Originally Posted by tirna

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.

**Dragonfire2008** · 06-29-2012 05:21 PM

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: Expandible/collapsible list

Thread Tools

Display

Expandible/collapsible list

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions