Skip to content

Left, Right, Top Tabs shortcode

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.

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


Examples


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


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


[tabs position="right"][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:



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