Tabs

The tabs shortcode allows you to display tabbed content. The options for this shortcode are shown below. See examples here.

OptionDefaultExampleDescription
animation(empty)animation="sliding"Choose the animation of the tabs:

  • (empty) – no animation
  • sliding – tabs slide up/down
size(empty)size="med"There are 3 overall sizes for tabs:

  • (empty) = Small
  • med = Medium
  • lrg = Large
layout(empty)layout="vertical"You can have a vertical (add vertical) or horizontal (default) tab layout.
boxed0boxed="1"Display a box around tab content.
fill(empty)fill="blocks-3"This will make the tabs fit perfectly to the area they are in:

  • (empty) = None
  • blocks-2 = I have two tabs
  • blocks-3 = I have three tabs
  • blocks-4 = I have four tabs
  • blocks-5 = I have five tabs
  • blocks-6 = I have six tabs
convertcvt-phone-ptrconvert="cvt-phone-ldsp"This is a responsive option. It gives you the choice to select when you want to swap to a small device friendly layout.

  • (empty) = None
  • cvt-phone-ptr = Phone portrait
  • cvt-phone-ldsp = Phone landscape
  • cvt-tablet-ptr = Tablet landscape
  • cvt-tablet-ldsp = Tablet landscape
width(empty)width="200px"Set the CSS width of the tabs.

Example

[tabs animation="sliding" width="400px"]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[/tabs]

Still having trouble? Head over to the forums.

Forums