AHC and ESSL Wordpress Hosting Service

Tabs shortcode

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:

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:

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

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

In this section:

Sub tab 1

Content of first nested tab under Second Tab

Sub tab 2

Content of second nested tab under Second Tab

This content will sit below the nested tabs under the Second tab

© Copyright Leeds 2017