Using the tabs shortcode you can create an area with tabbed navigation. This is great if you want to show more content in smaller area. The [tabs] shortcode is always used with the [section] shortcode, similarly to how columns are created. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are:

The [tabs] shorcode has two attributes:

contained
This attribute can be set to ‘yes’ or ‘no’. By default it is set to yes, which means that the contents of the tabs will be contained in a box. If set to no, the box will be removed.

pill
This attribute allows you to use pill-style navigation instead of regular tabs. Set to yes if you would like pills, the default value is no.

The [section] shortcode has just one attribute:
title
The title of the section which will be used in the tab.

Examples

[tabs]
[section title='My First Tab']
This is the content of this tab
[/section]
[section title='My Second Tab']
This is the content of the second tab
[/section]
[/tabs]

[tabs]
[section title=’My First Tab’]
This is the content of this tab
[/section]
[section title=’My Second Tab’]
This is the content of the second tab
[/section]
[/tabs]

[tabs]
[section title='My First Tab']
[row]
[column width='4']
<img src="http://bonsaished.com/musico/wp-content/uploads/sites/3/2013/03/photodune-277307-rock-concert-m-150x150.jpg" alt="rock concert" width="150" height="150" class="alignleft size-thumbnail wp-image-120" />
[/column]
[column width='8']
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
[/column]
[/row]
[/section]
[section title='My Second Tab']
This is the content of the second tab
[/section]
[/tabs]

[tabs]
[section title=’My First Tab’]
[row]
[column width=’4′]

[/column]
[column width=’8′]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
[/column]
[/row]
[/section]
[section title=’My Second Tab’]
This is the content of the second tab
[/section]
[/tabs]