Using the Tabs Shortcode
Tabs provide a way of enhancing the usability of long pages by splitting the content into chunks and making each chunk accessible through a tab-based navigation structure. They rely on Javascript support in browsers to work, but will degrade gracefully to a list with page anchors to navigate to the different sections.
Tabs are created using the following syntax:
[tab:First Tab Heading]
Content of first tab
[tab:Second Tab Heading]
Content of second tab
[tab:END]The result of this code on the page would be:
In this section:
First Tab Heading
Content of first tab
Second Tab Heading
Content of second tab
You must end the sequence of tabs using the [tab:END] shortcode.
Alternate headings for tabs
Tabs created using the above syntax will use the same text (_First Tab Heading_ and Second Tab Heading) as a heading for the content under the tab and the text for the tab itself. To change this behaviour, you can specify alternative text for the tab and header using the following syntax:
[tab:{First Tab}]
This will put 'First Tab' as the tab text,
but will omit the heading above the content.
[tab:{Second Tab}=This is a slightly longer heading]
This will put 'Second Tab' as the tab text,
but will use 'This is a slightly longer heading'
as the heading above the content.
[tab:END]The result of this code on the page would be:
In this section:
First Tab
This will put ‘First Tab’ as the tab text, but will omit the heading above the content.
Second Tab: This is a slightly longer heading
This will put ‘Second Tab’ as the tab text, but will use ‘This is a slightly longer heading’ as the heading above the content.
Nesting tabs
Tabs can be nested, so for pages with large amounts of content/data, the contents of one tab can be split into a sub-set of nested tabs. 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 tabs needs to be ended with its own [tab:END] shortcode (with the correct number of colons).
[tab:First Tab Heading]
content of first tab
[tab:Second Tab Heading]
content of second tab
[tab::Sub tab 1]
Content of first nested tab under Second Tab
[tab::Sub tab 2]
Content of second nested tab under Second Tab
[tab::END]
This content will sit below the nested tabs under
the Second tab
[tab:END]The result of this code on the page would be:
In this section:
First Tab Heading
Content of first tab