Tabs

A popular form of navigation is tabbed navigation. This is generally a group of links that give the impression of being sub-navigation built within the page. When clicked on, each tab contains a section of content associated with the tabs title. You can use text, images and/or other shortcodes.

Some shortcode might not work in tabs.

Example


This is the content of tab 1

This is the content of tab 2


How It’s Done


Basic usage below, for more advanced features, please refer to https://github.com/ubc/tabs-shortcode:

[tabs]
 [tab title="tab1"]
    tab 1 content
 [/tab] 
 [tab title="tab2"]
    tab 2 content
 [/tab]
[/tabs]

Here are the some attributes that the shortcode also excepts

[tabs collapsible="true" selected="0" event="click" position="top" ]
 [tab title="title1"]
  tab content 
 [/tab]
 [tab title="title2"] 
  another content tab 
 [/tab]
[/tabs]
  • collapsible = true or false - weather the tabs should be allowed to be collapsed - this doesn't work with twitter bootstrap
  • selected = integer for example - what tab should be selected. 0 means the first tab. 1 means the second tab etc.
  • event = 'click' or 'mouseover' - does do you user need to click on the tab or just mouse over to get to the content. Tip: Don't use mouseover if you are concerned with mobile.
  • position = 'top' , 'bottom' , 'left', 'right' on what side do you want the tabs to appear. See screenshots for an example.
  • vertical_tabs = true or false - depreciated is the same as position = left
source: http://wiki.ubc.ca/Documentation:CLF_Advanced_WordPress_Theme/tabs