• 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

• 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.

• July 3rd 09': Updated to v2.4, which supports a new set of "rel" and data-image" attributes you can insert into arbitrary links to quickly create link or image link togglers.

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.
5. An ontoggle event handler that lets you react whenever a DIV is expanded or collapsed.
6. Ability to expand the DIVs via a URL parameter string that overrides any default settings/persistence.

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 an external .js files, which you can download below (right click/ select "Save As"):

• animatedcollapse.js
• Demo images:

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

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!

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>

See available functions for more info on how to expand/ contract a DIV.

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.

ontoggle($, divobj, state) event handler

The optional ontoggle event fires whenever a DIV is expanded or collapsed, including when the page first loads. It allows you to perform different actions based on each DIV's state, such as play the embedded Flash movie inside the DIV only when it's expanded, and stop it when it's collapsed. See the following supplimentary page for more info on taking advantage of this event.

Available functions

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

Instead of calling the above JavaScript methods, you can also set up links that toggle a DIV just by inserting a special "rel" attribute inside them. This is arguably easier to set up if you're dealing simply with static links. Toggler links defined this way can also easily be configured to have its image updated depending on the DIV's state (assuming the toggler is an image link):

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.

Expanding a DIV using the URL parameter string

You can define a link on another page that causes the desired collapsible DIVs on the target page to expand when the later is loaded. See the following supplimentary page for more info.

Table Of Contents

This script consists of an index page plus one supplementary page:

• Script Index Page
• Using the onToggle event handler
• Expanding a DIV using the URL parameter string