How to Show and Hide Divs

now this code is a bit trickier, but its's sometimes worth the work! Think about this and the way it could benefit your pages

Download the files here- right click the link, and choose "save link as"

All in the Section Displayed at Once

Show Examples 1, 2, 3 | Hide Examples 1, 2, 3

Box 1 (individual):

Slide Down || Slide Up

Box 2 (individual):

Slide Down || Slide Up

Box 3 (individual):

Slide Down || Slide Up

Insert this code into to header for this to work :)

/***********************************************
* 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>

animatedcollapse.addDiv('box1', 'fade=1,height=80px')

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

animatedcollapse.init()

</script>
</head>

All that lovely code in your header is JS that is telling your page to make sure to do this stuff first!

Now, here is the code to make it work inside the HTML file

All in the Section Displayed at Once

<a href="javascript:animatedcollapse.show(['box1', 'box2', 'box3'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['box1', 'box2', 'box3'])">Hide Examples 1, 2, 3</a>

Display Each Section Individually

<p><strong>Box 1 (individual):</strong></p>

<a href="javascript:animatedcollapse.show('box1')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('box1')">Slide Up</a>

<div id="box1" style="width: 300px; background: #FFFFCC; display:none">
<strong>Content inside DIV!</strong><br />
<strong>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</strong><br />
</div>

</div>

<p><strong>Example 2 (individual):</strong></p>

<a href="javascript:animatedcollapse.show('box2')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('box2')">Slide Up</a>

<div id="box2" style="width: 300px; background: #D2FBFF; display:none">
<strong>Content inside DIV!</strong><br />
<strong>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</strong><br />
</div>

</div>

<p><strong>Example 3 (individual):</strong></p>

<a href="javascript:animatedcollapse.show('box3')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('box3')">Slide Up</a>

<div id="box3" style="width: 300px; background: #E7FFCC; display:none">
<strong>Content inside DIV!</strong><br />
<strong>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</strong><br />
</div>

</div>

Only One Item Expanded at a Time

Example 4 (part of group "pets"):

Slide Down || Slide Up

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.

Example 5 (part of group "pets"):

Slide Down || Slide Up

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.

Example 6 (part of group "pets"):

Slide Down || Slide Up

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.

Here is the code that would need to be in the header to make this work. For our purposes, we will call the classes cat, dog, and rabbit

</script>

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>

This is what the HTML code would look like:

<a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>

<div id="cat" style="width: 250px; 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.
</div>

<p><strong>Example 5 (part of group "pets"):</strong></p>

<a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a>

<div id="dog" style="width: 250px; background: #BDF381;">
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.
</div>

<p><strong>Example 6 (part of group "pets"):</strong></p>

<a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a>

<div id="rabbit" style="width: 250px; background: #BDF381">
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>

And voila! Sliding information! This is usually the best if you have multiple sections you will need to manage. See me if you need more than 3 categories, we'll have to play with the code.

All Code. All the time.

How to Show and Hide Divs

All in the Section Displayed at Once

All in the Section Displayed at Once

Display Each Section Individually

Only One Item Expanded at a Time