New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE6+ Opera 9+

Animated Collapsible DIV v2.4

Author: Dynamic Drive
  • 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

Example 2 (individual):

Slide Down || Slide Up

Example 3 (individual):

Slide Down || Slide Up

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: Developer's View

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

Select All

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"):

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

Select All

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:

Attribute Description
fade=1/0

Defaults to 0.

Set to 0 to disable fade effect. Set to 1 to enable.
speed=milliseconds

Defaults to 500.

Set to an integer in milliseconds to control the duration of the sliding effect (ie: 1000=1 second).
hide=1/0

Defaults to undefined.

Set to 0 to explicitly show this DIV when the page first loads. Set to 1 to hide. Typically you would leave out this attribute altogether (so it's undefined) to let the DIV default to its default visibility based on the relevant inline or global CSS on your page.

This attribute is meant to provide an alternate way for you to define the DIV's visibility programmically when you can't or don't wish to do so via CSS.

persist=1/0

Defaults to 0.

Set to 0 to disable persistence of this DIV's state within browser session. Set to 1 to enable.

In grouped contents, enabling persist on one of the contents automatically enables it on the other contents within the group as well. See the group attribute below for more info.

height=400px

Defaults to undefined.

Set to an integer plus "px" to explicitly define the height of the DIV using the script. Typically you would leave out this attribute altogether (so it's undefined) to let the DIV default to its natural height, or that specified in either your inline or global CSS.

This attribute is meant to provide an alternate way for you to define the DIV's height programmically when you can't or don't wish to do so via CSS.

group=groupname

Defaults to undefined.

Specifies the group this content belongs to (if any). Contents sharing the same group name are tied together in that only one content will be/ can be open at any time.

If you wish to enable persistence or a group of contents, you only need to enable persist on any one of them. For example:

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

The above has the same effect as enabling persist on all 3 of the contents above, since all 3 belong to the same group "pets".

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:

JavaScript Method Description
animatedcollapse.show(divids) Expands and reveals a collapsible DIV or multiple DIVs. Enter either the ID of a single DIV (string), or an array of multiple collapsible DIVs ids ['divid1','divid2',etc]. For example:

<a href="javascript:animatedcollapse.show('jason')">Show Jason DIV</a>

<a href="javascript:animatedcollapse.show(['jason', 'kelly'])">Show Jason and Kelly DIVs</a>

 

animatedcollapse.hide(divids) Contracts and hides a collapsible DIV or multiple DIVs. Either enter the ID of a single DIV (string), or an array of multiple collapsible DIVs ids. For example:

<a href="javascript:animatedcollapse.hide('jason')">Show Jason DIV</a>

<a href="javascript:animatedcollapse.hide(['jason', 'kelly'])">Show Jason and Kelly DIVs</a>

 

animatedcollapse.toggle(divid) Expand or contracts a collapsible DIV automatically based on its inverse state. Enter the ID of a single DIV to toggle its state. For example:

<a href="javascript:animatedcollapse.toggle('jason')">Show/ Hide Jason DIV</a>

 

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):

HTML Attribute Description
rel="expand[divids]" Expands and reveals a collapsible DIV or multiple DIVs. Enter either the ID of a single DIV (string), or an array of multiple collapsible DIVs ids ['divid1','divid2',etc]. For example:

<a href="#" rel="expand[jason]">Show Jason DIV</a>

<a href="#" rel="expand[jason, kelly]">Show Jason and Kelly DIVs</a>

 

rel="collapse[divids]" Contracts and hides a collapsible DIV or multiple DIVs. Either enter the ID of a single DIV (string), or an array of multiple collapsible DIVs ids. For example:

<a href="#" rel="collapse[jason]">Collapse Jason DIV</a>

<a href="#" rel="collapse[jason, kelly]">Collapse Jason and Kelly DIVs</a>

 

rel="toggle[divid]" Expand or contracts a collapsible DIV automatically based on its inverse state. Enter the ID of a single DIV to toggle its state. For example:

<a href="#" rel="toggle[jason]">Toggle Jason DIV</a>

 

data-openimage="path_to_image"

data-closedimage="path_to_image"

If your toggler link is an image link, you can insert these two attributes inside it to automatically update the image based on the state of the DIV it toggles. For example:

<a href="#" rel="toggle[jason]" data-openimage="expand.jpg" data-closedimage="collapse.jpg"><img src="collapse.jpg" style="border-width:0" /></a>

With the above two attributes defined, the toggler's image above will automatically be updated to show one of the two images specified inside them depending on whether the DIV it toggles is currently expanded or collapsed.

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: