• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

DaniWeb Web Dev Community

DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

• May 24th 08': Script rewritten and updated to v2.0.
• June 4th, 08' (v2.01)- Bug fix to work with jquery 1.2.6 (which changed the way attr() behaves). Only animatedcollapse.js file changed.

Description: This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. It's a popular effect on many social networking/ comment sites. Three distinguishing features of this script are:

1. Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.
2. Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.
3. Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.
4. Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.

Have fun sliding content up and down!

Demos:

Show Examples 1, 2, 3 | Hide Examples 1, 2, 3 Example 1 (individual): Slide Down || Slide Up Content inside DIV! Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS. Example 2 (individual): Slide Down || Slide Up Content inside DIV! Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS. Example 3 (individual): Slide Down || Slide Up Content inside DIV! Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.

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.

Directions:

Step 1: Insert the following code in the HEAD section of your page

Notice the code at the very top- a doctype declaration. Your page must contain one of the valid doctypes in order for this script to work correctly! The code above references two external .js files, which you can download below (right click/ select "Save As"):

• animatedcollapse.js
• jquery-1.2.2.pack.js

Step 2: Insert the below sample code into the BODY section of your page:

And there you have it. Read on for more detailed instructions.

Setup Information

The links to expand and contract the DIV, plus the arbitrary DIV itself, look like this:

<a href="javascript:animatedcollapse.toggle('jason')">Toggle Display</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.</b><br />
</div>

In the HEAD section of your page, call animatedcollapse.addDiv() to add this DIV to be animated before finally calling animatedcollapse.init()

<script type="text/javascript">
animatedcollapse.addDiv('jason', 'optional_attribute_string')
//additional addDiv() call...
//additional addDiv() call...
animatedcollapse.init()
</script>

The first parameter in addDiv() is the ID of the DIV to expand/collapse, and the second parameter, an optional string that adds or disables additional effects on the DIV. For each collapsible content on your page, you need to call addDIv() again with the pertinent info. After all your collapsible DIVs have been accounted for, call animatedcollapse.init() at the very end and just once!

Feature attributes String

The second parameter in animatedcollapse.addDiv() is optional, and accepts a string that enables/ disables certain effects on the DIV. Separate each attribute with a comma (,). Each attribute within the string is optional as well:

As mentioned, all attributes above are optional when calling animatedcollapse.addDiv(). While setting some attributes to 0 usually has the same effect as not defining it at all, the exception are "hide" and "height". Not setting these two attributes means the script will not modify the DIV's natural visibility and height, respectively, which is different from setting them. Take for example:

animatedcollapse.addDiv('cat')
animatedcollapse.addDiv('dog', 'height=300px')
animatedcollapse.addDiv('rabbit', 'hide=1')

• The "cat" DIV's visibility will be based on whether any global or inline CSS on your page hides the DIV (using "display:none"). The DIV's height will be based on either the content's natural height, or if CSS is defined, the CSS "height" property.
• The "dog" DIV's visibility will be based on whether any global or inline CSS on your page hides the DIV (using "display:none"). The DIV's height will be set to 300px.
• The "rabbit" DIV's visibility will be hidden. The DIV's height will be based on either the content's natural height, or if CSS is defined, the CSS "height" property.

Available functions

The script supports 3 functions you can invoke inside your links or elsewhere to toggle the display of each collapsible DIV:

Two very different ways of hiding your collapsible DIVs when the page loads

When the page first loads, there are two ways to initially hide those collapsible DIVs that you want hidden by default: either via normal CSS, or via the script. An example of the former first:

<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.</b><br />
</div>

The advantage of using regular CSS is that the DIV will be hidden from the very start, even before the script is initialized. The disadvantage is the accessibility issue for people with JavaScript disabled.

The other way to hide your DIVs is by defining the attribute "hide=1" inside animatedcollapse.addDiv() when initializing the script:

animatedcollapse.addDiv('rabbit', 'hide=1')

The advantages with this are arguably ease of maintenance and increased accessibility. The disadvantage is that the DIV will be temporarily visible before the script is initialized and run.