Accordion shortcode

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/

source: https://wiki.ubc.ca/Documentation:CLF_Advanced_WordPress_Theme/accordions

Leave a Reply

You must be logged in to post a comment.