Then, in the HEAD
section of the script, call ddaccordion.init()
with the appropriate options:
Option | Description | |||
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 " | |||
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. | |||
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"] . | |||
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: "
Set the first parameter to "
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 " | |||
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 ." |
On the supplimentary page , lets see the methods you can call anywhere on your page to simulate a user clicking on a header.