What does it do?

The accordion shortcode allows you to display information in tabs that expand when clicked, this is useful as it makes it easy to put a large amount of information into sections on a page without overloading the page with information.

How do I use it?

To embed this shortcode into the page, you need to copy the following HTML:

Single accordion tab:

[sa_accordion id="groupID"][sa_accordion_tab title="Link One"] Stuff inside Link One [/sa_accordion_tab][/sa_accordion]

Accordion Stack:

[sa_accordion id="groupID"][sa_accordion_tab title="Collapsible Item 1" active="false"]
HTML/ShortCode Content for tab 1 here
[/sa_accordion_tab][sa_accordion_tab title="Collapsible Item 2"]
HTML/ShortCode Content for tab 2 here
[/sa_accordion_tab][sa_accordion_tab title="Collapsible Item 3"]
HTML/ShortCode Content for tab 3 here
[/sa_accordion_tab][sa_accordion_tab title="Collapsible Item 4"]
HTML/ShortCode Content for tab 4 here
[/sa_accordion_tab][/sa_accordion]

Rules:

  • title="" - sets the title of the tab.
  • active="" - sets the tab to be automatically be active. (true/false)

Once you have copied this, paste it into the page in the text editor view, click update/publish, and then refresh the page.