Group contents together and reveal them on demand when the user clicks on their associated headers, with Accordion Content script! Specify whether only one content within the group should be open at any given time, style the headers depending on their content state, and even enable persistence so the state of the contents is preserved within a browser session. The script enlists the help of the jQuery library for its engine. There are lots of configurable options, so lets get to them:
Headers and their contents to expand/Collapse on the page are identified through the use of shared CSS class names for easy set up.
Ability to specify which contents should be expanded by Default when the page first loads.
Specify whether only one content should be open at any given time (collapse previous before expanding current.
Specify whether at least one header should be open at all times (so never all closed). New in v1.5
Set whether the headers should be activated "click" or "mouseover". If the headers themselves are hyperlinked and set to activate via "click", you can optionally have the browser go to that URL upon expanding the content, instead of doing nothing. New in v1.7
When headers are set to be activated "mouseover", set delay (in millisec) before this happens. New in v1.6
Enable optional persistence so when the user expands a header then returns to the page within the same browser session, the content state is preserved.
Style the two states of the headers easily by setting two different CSS classes to be added to the header depending on whether its content is expanded or collapsed. You can also add additional HTML to the beginning or end of each header, such as an icon image that reflects the current state of the content.
Two event handlers oninit() and onopenclose() can be used to run custom code when an Accordion Content first loads and whenever a header is opened/closed, respectively.