Skip to content

Tabs

Usage: 

Use tabs to show a logical progression of steps or information. Use [item] with the 'title' attribute to create the tabs. The [item] shortcode supports an href and target attribute to link the tab straight to another url instead of content in the page. The [rps-include] shortcode can be used with the [tabs] shortcode to include content from separate pages for each tab to more easily manage the content.

Example:

http://commkit.gsu.edu/files/2013/06/Screen-Shot-2013-06-26-at-12.29.24-PM.png

http://commkit.gsu.edu/files/2013/06/Screen-Shot-2013-06-26-at-12.29.14-PM.png


Note: a new header attribute is being added to style the tabs when used on a Home Page.

Example:

[tabs position="left"]
[item title="Tab 1"]
Hello World
[/item]
[item title="Tab 2"]Hello World Again
[/item]
[/tabs]

 

Style:


You can also style your tabs to look like this:

http://commkit.gsu.edu/wp-content/blogs.dir/3/files/2013/10/TabsHeaderStyle2.jpg

by adding the style attribute with the header style to the [tabs] shortcode tag, like this:

[tabs style="header"][item title="Tab 1"]Hello World[/item][item title="Tab 2"]Hello World Again[/item][item title="Tab 3"]Hello World [/item][/tabs]


Attributes:

position           Use this attribute to put tabs to the 'left' or the 'right'.  Leave blank for top.

url                   Url to open when tab selected.

style               Use the 'header' style to change the look of your tabs.

Feedback and Knowledge Base