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

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

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. In other words, depending on the referring page, different DIVs can be expanded by default, which overwrites any default or persistence settings that may be in effect on said DIV. The syntax is:

<a href="target.htm?expanddiv=divid1,divid2,etc">Target Page</a>

where "divid1,divid2,etc" are the IDs of the DIVs you wish to expand, each separated by a comma (if more than 1 DIV). You can also expand or collapse all collapsible DIVs on your page using the values "all" or "none":

<a href="target.htm?expanddiv=all">Target Page</a>

<a href="target.htm?expanddiv=none">Target Page</a>

For example, the following 5 links forcibly expands various DIVs in our two demos below:

• Expand Jason DIV
• Expand Jason, Kelly, and Cat DIVs
• Expand all DIVs (for DIVs that belong in a group, only the last one will be open).
• Expand no DIVs (collapse all)
• Reset DIVs (no parameter string)

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.

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