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

Note: Last updated June 27th, 07'. Added ability for a DIV to be initially expanded.

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 social networking/ comment sites such as Digg. Three distinguishing features of this script are:

1. The ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without. In the later case, the script will first hide (versus collapse) the DIV until retrieving its true height on page load.
2. A persistence feature that if enabled will remember if a DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.
3. The duration of the animation is absolute and user configurable, such as 1.5 seconds. This means regardless of the height of the DIV, the script will take 1.5 seconds to finish revealing it. This creates a uniform period before a DIV is revealed regardless of its height.
4. By default the script will dynamically collapse the DIV in question when the page loads. You can optionally specify that the script leave the DIV expanded instead.

Have fun sliding content up and down!

Demos:

Example 1:

Example 2:

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

• animatedcollapse.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, and the arbitrary DIV itself, look like this:

<a href="javascript:collapse1.slidedown()">Slide Down</a> | <a href="javascript:collapse1.slideup()">Slide Up</a>

<div id="dog" style="width: 300px; height: 110px;">
Content inside DIV...
</div>

Then, following the DIV to expand/contact, you need to call a function to finalize the effect with the desired settings:

<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("dog", 1000, false)
</script>

"Collapse1" should be an unique but arbitrary variable that you can then use to invoke a specific action inside your links, such as collapse1.slideup(). Moving on, "dog" should be the ID of the DIV, 1000 the duration of the animation in milliseconds, and false a Boolean indicating whether persistence should be enabled (true or false).

By default the script will dynamically collapse the DIV in question when the page loads. You can optionally specify that the script leave the DIV expanded instead, by making use of the 4th optional parameter of animatedcollapse() and setting it to "block":

var collapse1=new animatedcollapse("dog", 1000, false, "block")

Available functions

The script supports 3 functions you can invoke inside your links to toggle the display of the target DIV:

1. instance.slidedown(): Expands and reveals the DIV.

2. instance.slideup(): Contracts and hides the DIV.

3. instance.slideit(): Expand or contracts the DIV automatically based on its reverse state.

Considerations when defining your DIV

This script will work on both DIVs with an explicit CSS "height" attributed defined, and those without. For example:

<!--DIV with height defined -->
<div id="dog" style="width: 300px; height: 110px;"></div>

<!--DIV without height defined-->
<div id="cat" style="width: 300px;"></div>

The advantage of a DIV with a height attribute explicitly defined is that the user can expand/contract the DIV almost immediately, instead of after the document has fully loaded (when the script can dynamically get its height). Of course, in real life, you often cannot set the DIV's height in advanced for various reasons, and this script will still work in these cases.

Another thing to take note is if you wish to add padding/margins to the DIV- you'll need to do it inside another DIV contained within it instead, for example:

<div id="cat" style="width: 300px;">
<div style="padding: 0 5px">
Some content
</div>
</div>

In other words, the "padding: 0 5px" declaration shouldn't be added inside the staring DIV itself, but within it. The reason for this limitation is that padding and margins will throw off certain calculations within the script.