Tabs

Tabbed containers are a organizational structure for content.  Each section is identified by a title, with all titles grouped together into a horizontal or vertical bar of tabs.  Only one tab may be open at a time, and the contents of the open tab display immediately beneath the tab bar.  One tab is always visible; there is no "all closed" state.

Because of the grouped nature of tabs, all [tab]s in a group need to come one right after the other in the page body, and the group of tabs needs to be wrapped in a [container] shortcode.

At small screen sizes (e.g., mobile phones), tabs will behave as accordions (see Growables), since there is not usually enough screen width to display a tab bar with good usability.

[container] Attributes:
  • excerpt: use is discouraged; may be removed in the future
[tab] Attributes:
  • title: required (unless icon is provided); the title of the tab as displayed in the tab bar
  • icon: optional; accepts the class name of an icon from Font Awesome. This may not look good unless used in an area that was themed specifically for tabs with icons.
  • excerpt: use is discouraged; may be removed in the future

Best practices:

  • Tab length: If there are too many tabs or the titles of the tabs are very long, tabs will wrap to the next line, which hurts usability and just plain looks bad (Remember old school Windows?). In general, try to limit each tab to a couple of clear but succinct words, and no more than 4-5 tabs per container (and that's only if you used short titles).

  • Mind the cost of interaction: While tabs can benefit the user by reducing the amount of information to digest at once, it can also bury information he/she wants to find behind additional interactions (clicks). This is not only an inconvenience but increases the risk of the user not finding what he/she was looking for.  Additionally, information that the user would want to view in one glance should not be strung across multiple tabs.

  • Add the entire tab before trying to edit its contents: The shortcodes, especially tabs and containers, are pretty unforgiving when it comes to missing closing tags. To minimize the possibility for issues, the best practice for adding a tab is to create the tab before trying to add content to it:

    • Place your cursor at the end of the closing [/tab] just before where you want the new tab to go, and press Enter.
    • Type the tab shortcode: [tab title="New Tab 1"] Enter Enter [/tab]
    • Enter the content for your tab starting on the blank line above.

Example source code:

To make a tab within the container, use the opening tab and closing tab tags. In the example below, there are two tabs, "First Tab" and "Second Tab." Dont forget to close the container or the page may not render correctly. Here is the code for a tabbed container, as it would appear in the Body editing box:

[container]

[tab title="First Tab"]

Content for first tab goes here.

[/tab]

[tab title="Second Tab"]

Content for second tab goes here.

[/tab]

[/container]

The tabbed container will appear in the following format:

Tabs.jpeg