Solved

Nested expand/collapse list with CSS

Posted on 2011-02-17
11
773 Views
Last Modified: 2012-05-11
I need help with putting together an easy code to display a collapsed tree that expands into a list than can expand even more.

For example:

Menu item 1
     Expand to another name
          Expands to detailed description

I'd like something easy either in CSS or HTML with javascript in the head.
0
Comment
Question by:smrivera84
  • 6
  • 5
11 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 34920955
0
 

Author Comment

by:smrivera84
ID: 34922905
I was hoping to have the text that's expanded able to expand even more text. And perferrably without the use of images, unless necessary.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34925258
Check this example and you will see that you can do it:
<!DOCTYPE HTML>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>
</head>

<body>

<b><a href="javascript:animatedcollapse.show(['jason', 'kelly', 'michael'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['jason', 'kelly', 'michael'])">Hide Examples 1, 2, 3</a></b>

<p><b>Example 1 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('jason')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a>

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.<a href="javascript:animatedcollapse.toggle('kelly')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('kelly')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('kelly')">Slide Up</a></b><br />
</div>
<div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.<a href="javascript:animatedcollapse.toggle('michael')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('michael')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('michael')">Slide Up</a></b><br />
</div>
<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

<hr style="margin: 1em 0" />

<p><b>Example 4 (part of group "pets"):</b></p>

<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>

<div id="cat" style="width: 400px; background: #BDF381;">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a>
</div>

<div id="dog" style="width: 400px; background: #BDF381;">
<p><b>Example 5 (part of group "pets"):</b></p>The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
<a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a></div>

<div id="rabbit" style="width: 400px; background: #BDF381">
<p><b>Example 6 (part of group "pets"):</b></p>Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
</div>

</body>
</html>

Open in new window

0
 

Author Comment

by:smrivera84
ID: 34925684
Awesome. Now is it also possible not to have two separate links for expand and collapse ("Slide down" and "Slide up")?

I'm wanting one link that when clicked on will expand then when clicked on again will collapse.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34926046
Well yes, please note that I use same markup:
 
<!DOCTYPE HTML>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>
</head>

<body>

<b><a href="javascript:animatedcollapse.show(['jason', 'kelly', 'michael'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['jason', 'kelly', 'michael'])">Hide Examples 1, 2, 3</a></b>

<p><b>Example 1 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('jason')">slider</a> <!-- <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a> -->

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.<a href="javascript:animatedcollapse.toggle('kelly')">slider</a> <!-- <a href="javascript:animatedcollapse.show('kelly')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('kelly')">Slide Up</a> --> </b><br />
</div>
<div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.<a href="javascript:animatedcollapse.toggle('michael')">slider</a> <!-- <a href="javascript:animatedcollapse.show('michael')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('michael')">Slide Up</a> --> </b><br />
</div>
<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

<hr style="margin: 1em 0" />

<p><b>Example 4 (part of group "pets"):</b></p>

<a href="#" rel="toggle[cat]" >Next</a> <!-- <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a> -->

<div id="cat" style="width: 400px; background: #BDF381;">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
<a href="#" rel="toggle[dog]" >Next</a> <!-- <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a> -->
</div>

<div id="dog" style="width: 400px; background: #BDF381;">
<p><b>Example 5 (part of group "pets"):</b></p>The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
<a href="#" rel="toggle[rabbit]" >Next</a> <!-- <a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a> --> </div>

<div id="rabbit" style="width: 400px; background: #BDF381">
<p><b>Example 6 (part of group "pets"):</b></p>Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
</div>

</body>
</html>

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:smrivera84
ID: 34926865
This is great...however, I left an important part out.

I need for the first section that slides out (the one coded in yellow #FFFFCC) to be able to list seperate links that will both have separate descriptions.

For example:

ANESTHESIOLOGY (when clicked will expand two choices - however some other courses may have more than two):

1. Externship in Anesthesiology (when clicked on will expand to a)

2. Anesthesiology Elective (when clicked on will expand to b)

a. Length: 4 weeks
            Time(s): Full Time
            Hours: 44 per week

b. Length: 4 weeks (when clicked on will expand to i)
Time(s): Full Time
Hours: 50 per week

i. The primary objective of this course is to introduce the student to contemporary anesthesiology practice with emphasis on respiratory physiology, cardiovascular physiology, and perioperative management of the surgical patient.


I hope this made sense and that I didn't lose you on this just yet.
      

0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34927259
Yes, you can do this with help of example provided earlier.
or are you asking to do it for you?
0
 

Author Comment

by:smrivera84
ID: 34927532
Yes, could you please do this, please?
0
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 34927945
It's against the rules of this web space to do somebody's work, we can help if you stack or have a question, but we cannot complete your project or part of it, if you want something to be developed you should hire someone.
Anyway have a look:
<!DOCTYPE HTML>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<style>
a {color:black; display:block; clear:both;}
</style>

<script type="text/javascript">

animatedcollapse.addDiv('first', 'fade=1,height=50px')
animatedcollapse.addDiv('second1', 'fade=1,height=50px,group=second')
animatedcollapse.addDiv('second2', 'fade=1,height=170px,group=second')
animatedcollapse.addDiv('third2', 'fade=1,height=120px')

//animatedcollapse.addDiv('jason', 'fade=1,height=80px')
//animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
//animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>
</head>

<body>

<a href="javascript:animatedcollapse.toggle('first')">ANESTHESIOLOGY:</a>

<div id="first" style="width: 300px; background: #FFFFCC; display:none">

<a href="javascript:animatedcollapse.toggle('second1')">1. Externship in Anesthesiology</a>

<a href="javascript:animatedcollapse.toggle('second2')">2. Anesthesiology Elective</a>

</div>
<div id="second1" style="width: 300px; background: #FFFFCC; display:none">
a. Length: 4 weeks
Time(s): Full Time
Hours: 44 per week
</div>
<div id="second2" style="width: 300px; background: #FFFFCC; display:none">
<a href="javascript:animatedcollapse.toggle('third2')">b. Length: 4 weeks</a>
Time(s): Full Time
Hours: 50 per week
<div id="third2" style="width: 300px; background: #FFFFCC; display:none">
i. The primary objective of this course is to introduce the student to contemporary anesthesiology practice with emphasis on respiratory physiology, cardiovascular physiology, and perioperative management of the surgical patient.
</div>
</div>




<div style="clear:both;margin-top:100px;" >
<b><a href="javascript:animatedcollapse.show(['jason', 'kelly', 'michael'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['jason', 'kelly', 'michael'])">Hide Examples 1, 2, 3</a></b>

<p><b>Example 1 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('jason')">slider</a> <!-- <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a> -->

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.<a href="javascript:animatedcollapse.toggle('kelly')">slider</a> <!-- <a href="javascript:animatedcollapse.show('kelly')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('kelly')">Slide Up</a> --> </b><br />
</div>
<div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.<a href="javascript:animatedcollapse.toggle('michael')">slider</a> <!-- <a href="javascript:animatedcollapse.show('michael')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('michael')">Slide Up</a> --> </b><br />
</div>
<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

<hr style="margin: 1em 0" />

<p><b>Example 4 (part of group "pets"):</b></p>

<a href="#" rel="toggle[cat]" >Next</a> <!-- <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a> -->

<div id="cat" style="width: 400px; background: #BDF381;">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
<a href="#" rel="toggle[dog]" >Next</a> <!-- <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a> -->
</div>

<div id="dog" style="width: 400px; background: #BDF381;">
<p><b>Example 5 (part of group "pets"):</b></p>The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
<a href="#" rel="toggle[rabbit]" >Next</a> <!-- <a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a> --> </div>

<div id="rabbit" style="width: 400px; background: #BDF381">
<p><b>Example 6 (part of group "pets"):</b></p>Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
</div>

</body>
</html>

Open in new window

0
 

Author Comment

by:smrivera84
ID: 34928574
this is all i needed. thnx.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34928802
You can close this question by accepting solution.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Best Practice CSS floating images 2 16
Bootstap Icons 3 22
Bootstrap input box width 2 15
uploading image to a profile page 1 5
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now