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:

[acc:First Accordion Heading]

	Content of first accordion

[acc:Second Accordion Heading]

	Content of second accordion

[acc:END]

The result of this would be:

[acc:First Accordion Heading]
Content of first accordion
[acc:Second Accordion Heading]
Content of second accordion
[acc:END]

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).

[acc:First Accordion Heading]

	Content of first Accordion

[acc:Second Accordion Heading]

	Content of second Accordion

    [acc::Sub Heading 1]

    	Content of first nested accordion under Second heading

    [acc::Sub Heading 2]

    	Content of second nested accordion under Second heading

    [acc::END]

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

[acc:END]

The result of this would be: