The [accordions] shortcode can be used to split content into a collapsible accordion.
PLEASE NOTE: Shortcode attributes, for example, an attribute would be the title in the accrodion shortcode [accordion title="Accordion Title"], should not contain any html tags and/or special for example: strong tags, header tags, page breaks, ' (apostrophe). The effect could cause issues with the websites layout or functionality.
Auto Height
For auto height on accordion content, add parameter heightStyle=content i.e. [accordions heightStyle=content]
Auto Collapse
For accordions to stay collapsed when the page loads (i.e. the first accordion does not open automatically), add the parameters collapsible=true and active=false, i.e., [accordions collapsible=true active=false].
Add Classes to Accordion
Use the "style" attribute to add a class to either the entire accordion container or to each accordion heading. See example below.
See below, for example:
[accordions collapsible=true active=false style=accordion-container] [accordion title="section 1" style="accordion-style1"] content [/accordion] [accordion title="section 2" style="accordion-style2"] more content [/accordion] [accordion title="section 3" style="accordion-style3"] even more content [/accordion] [/accordions]
The below code will display the first accordion as 'open' as this is the default behavior of accordions
Usage:
[accordions style=accordion-container] [accordion title="section 1" style="accordion-style1"] content [/accordion] [accordion title="section 2" style="accordion-style2"] more content [/accordion] [accordion title="section 3" style="accordion-style3"] even more content [/accordion] [/accordions]
Built on top of jQueryUI Accordion: http://jqueryui.com/accordion/