Tabs

Note: This feature is only available in the Meerkat and Meerkat16 themes.


Overview

If you’d like to present multiple versions of content that is related (e.g. how to clear your browser history if you are using Firefox vs. Chrome vs. Safari), you can use the tabs shortcode.

Note: At smaller screen sizes, a tab group will transition to an expando group to maintain readability. 

Demo

  • Firefox instructions go here.

  • Chrome instructions go here.

  • Safari instructions go here.


The shortcode

The tabs above were created using this code:
[tabs]
[tab title="Firefox"]Firefox instructions go here.[/tab]
[tab title="Chrome"]Chrome instructions go here.[/tab]
[tab title="Safari"]Safari instructions go here.[/tab]
[/tabs]
You can can type the shortcode in manually into the editor (either visual or text mode will work), or see the shortcode builder instructions if you’d like to use a friendlier graphical interface.

You can have as many tabs as you like. Each tab needs to be wrapped in [tab][/tab] and have a title. The title (e.g. “Firefox”) is what appears as the clickable tab label. The content for each tab (e.g.”Firefox instructions go here”) can contain HTML, and even other shortcodes. The group of tabs must be wrapped in [tabs][/tabs].

Additional styles

In the Meerkat theme (not Meerkat16), you may change the background color of the tabs by assigning additional classes to the [tabs][/tabs] shortcode:
[tabs button_classes="orange-buttons"]
Valid button_classes parameters include:

  • orange-buttons
  • blue-buttons
  • green-buttons
  • purple-buttons

Creating Tabs with the Shortcode Builder

To use the shortcode builder interface, you will need to have the Williams Shortcode Builder plugin activated, and be using the visual editor. This method is not available for sites.williams.edu.

To create the [tab][/tab] shortcode:

  1. In the visual editor, select and highlight the content you'd like to place inside the tab.
  2. Click on the Shortcodes button, located in the 2nd row of your visual editor's toolbar (outlined in red below). If you only see 1 row of tools, click on the kitchen sink (the last button in the row) to reveal the 2nd row.
  3. Hover over the Format Content menu to reveal its submenu, and select Single Tab,
    outlined in red below.Tab menu location
  4. Fill out the form in the dialog popup box. The content that you wrote and selected should appear as the value of the Tab Content box.sc-dialog-tab-single
  5. Fill in a title for your tab. Keep it short and easy for users to scan and read.
  6. Rinse and repeat to create more tabs.
  7. Clicking “OK” will insert the shortcode into the visual editor.
  8. Wrap the single tabs in a tab group.
    1. Highlight all of your single tabs in the editor.Selected tabs
    2. Click on the "Tab Group" shortcode tool, outlined in red below.
      Tab Group menu location
    3. Set options for the tab group.
    4. Click “OK” to insert the shortcode into the visual editor.

Tab Group Options

The options for tabs differ between the Meerkat and Meerkat 16 themes. And look, we're using tabs to differentiate them! So meta.

    • Single Tabs: The individual tab shortcodes that you have selected should appear here.
    • Style as Expandos: Display your tabs as an Expando group, in which only one item may be expanded at a time.

    Meerkat16 Tab Group Dialog

    • Single Tabs: The individual tab shortcodes that you have selected should appear here.
    • Tab Color: In the Meerkat theme, the default tab color is green. If you'd like to try another color, select one from the pulldown menu.
    • Content Box Background: The default background color for the content box (and currently selected tab) is white, but there's also a pale blue available.


Editing the shortcode

You can edit the shortcode directly in the editor (text or visual), or you can delete the shortcode, and create a new one using the shortcode builder tool again.


Linking to a Specific Tab

By default, the first tab will be selected when you load a page. If you want to link to a page that has a different tab selected, you'll need to append the tag's title to the URL, like this: http://wordpress.williams.edu/tabs/#safari.

It's easy to copy this URL:

  1. Hover over the tab until you see the link icon.
  2. Click the icon to copy the tab's URL to your clipboard.
  3. Paste the link where you need it.