Accordion Shortcode

Using the Accordion Shortcode

Accordions provide a way of enhancing the usability of long pages by splitting the content into chunks and making each chunk accessible through an expandable structure, triggered by headings. They rely on Javascript support in browsers to work, but will degrade gracefully. They work in a similar way to tabs, but are generally a vertical menu structure (rather than horizontal) where the content for each heading is presented underneath (usually through an animated reveal when the heading is clicked).

Accordions are created using the following syntax:

The result of this would be:

First Accordion Heading

Content of first accordion

Second Accordion Heading

Content of second accordion

You must end the sequence of tabs using the [acc:END] shortcode.

Nesting Accordions

Accordions can be nested, so for pages with large amounts of content/data, the contents of one accordion can be split into a sub-set of nested accordions. This is achieved by using the colon separator in the shortcode to indicate the nesting level – the previous examples all have a nesting level of one. Each level of accordions needs to be ended with its own [acc:END] shortcode (with the correct number of colons).

The result of this would be:

First Accordion Heading

content of first Accordion

Second Accordion Heading

content of second Accordion

Sub Heading 1

Content of first nested accordion under Second heading

Sub Heading 2

Content of second nested accordion under Second heading

This content will sit below the nested accordions under
the Second heading.