Accordion Script

headerclass

Shared CSS class name of headers containers.

contentclass

Shared CSS class name of contents containers.

revealtype

Reveal content when user clicks or onmouseover the header? Valid values are: “click”, “clickgo”, or “mouseover”.

The difference between “click” and clickgo” is only visible if your headers are hyperlinked. With “click”, that link is disabled, so clicking each header will only expand the corresponding content. With “clickgo”, the script will first expand the content, then navigate to the URL specified in the header afterwards.

mouseoverdelay

If revealtype above is set to “mouseover”, set delay in milliseconds before header expands onMouseover.

collapseprev

Collapse previous content (so only one open at any time)? true/false.

defaultexpanded

Index(es) of content(s) that should be open by default in the format [index1, index2, etc], where 0=1st content, 1=2nd content etc. [] denotes no content should be open by default.

scrolltoheader

If set to true will scroll to the expanded header after its content has been revealed. It is only triggered when the user explicitly expands a header (either by clicking on a header or calling the expandone() method), and NOT when the page initially loads. Defaults to false.

onemustopen

Collapse previous content (so only one open at any time)? true/false.

animatedefault

Should contents that are open by default be animated into view? true/false.

persiststate

Persist state of opened contents within a browser session, so returning to the page recalls the saved states? true/false.

toggleclass

Specifies two CSS classes to be applied to the header when it’s collapsed and expanded, respectively, in the form [“class1″, “class2″]. Enter a blank string inside either of the two to denote no CSS class, for example: [“”, “class2″].

animatespeed

Speed of sliding animation. Value should be an integer in milliseconds (ie: 200), or one of the keywords “fast”, “normal”, or “slow”.
oninit Event handler that fires when the headers have initailized for the first time on the page. For more info, see: “Taking advantage of the oninit() and onopenclose() event handlers.”

onopenclose

Event handler that fires whenever a header is expanded or contracted. For more info, see: “Taking advantage of the oninit() and onopenclose() event handlers.”

togglehtml

This option lets you optionally add additional HTML to each header when it’s expanded and collapsed, respectively. It accepts 3 parameters:

togglehtml: [“none”, “”, “”],

For the first parameter, 4 possible values supported: “none”, “prefix”, “suffix”, or “src”. The 2nd and 3rd parameters are the HTML to add to each header when it’s collapsed and expanded, in that order. Here are a few possible scenarios:

togglehtml: [“none”, “”, “”], //no additional HTML added to header
togglehtml: [“prefix”, “[closed] “, “[open] “], //two text added in front of the header
togglehtml: [“suffix”, “ ”, “ ”], //two images added to the end of the header
togglehtml: [“src”, “minus.gif”, “plus.gif”], //assuming each header is an image itself, toggle between two images depending on state

Set the first parameter to “src” like in the last line above if your headers are images themselves, and you wish to update their “src” property depending on the content state. Here’s an example:
Java Script Reference
DOM Reference
IE Filters reference

Script setting:

headerclass: “myheader”,
contentclass: “mycontent”,
,
,
togglehtml: [“src”, “minus.gif”, “plus.gif”],

	  	The HTML:

Java Script Reference<br />

1st content here…

DOM Reference<br />

2nd content here…

IE Filters reference<br />

3rd content here…

In the above example, instead of using regular container headers like a H1 tag, I’m using images instead. In other words, clicking on the images will expand/collapse content. In such a case, I can get the script to dynamically update the image shown by setting “togglehtml”: [“src”, “minus.gif”, “plus.gif”]



This page may have a more recent version on pmwiki.org: PmWiki:AccordionScript, and a talk page: PmWiki:AccordionScript-Talk.