Animated Collapsible DIV v2.4
- July 3rd 09': Updated to v2.4, which supports a
new set of "
rel
" anddata-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:
- Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.
- Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.
- 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.
- 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.
- An
ontoggle
event handler that lets you react whenever a DIV is expanded or collapsed. - 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 UpExample 2 (individual): Slide Down || Slide UpExample 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.
|
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:
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 |
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
animatedcollapse.addDiv('cat',
'speed=400,group=pets,hide=1') The above has the same effect as enabling |
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"
|
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: