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!
Directions:
Step 1: Insert the following code in the HEAD section of your page
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="animatedcollapse.js"></script>
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!
Step 2: Insert the below sample code into the BODY section of your page:
- Code: Select all
<p><b>Example 1:</b></p>
<a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a>
<div id="dog" style="width: 300px; height: 110px; background-color: #99E0FB;">
<!--Your DIV content as follows -->
<h3>Content inside DIV!</h3>
<h4>Note: CSS height attribute defined</h4>
</div>
<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>
<p><b>Example 2:</b></p>
<a href="javascript:collapse2.slideit()">Show/ Hide DIV</a>
<div id="cat" style="width: 300px; background-color: #99E0FB;">
<!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV -->
<div style="padding: 0 5px">
<h3>Content inside DIV!</h3>
<h3>Content inside DIV!</h3>
<h4>Note: No CSS height attribute defined. Persistence enabled.</h4>
</div>
</div>
<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)
</script>
<p><b>Example 3:</b></p>
<a href="javascript:collapse3.slidedown()">Slide Down</a> || <a href="javascript:collapse3.slideup()">Slide Up</a>
<div id="fish" style="width: 300px; height: 150px; background-color: #99E0FB;">
<!--Your DIV content as follows -->
<h3>Content inside DIV!</h3>
<h4>Note: DIV set not to collapse initially. Note that if "enablepersist" is enabled, cookie value overrides this setting.</h4>
</div>
<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse3=new animatedcollapse("fish", 1000, false, "block")
</script>
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:
- Code: Select all
<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:
- Code: Select all
<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":
- Code: Select all
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:
- Code: Select all
<!--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:
- Code: Select all
<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.
