Tabs

Tab shortcode is available in three styles, two horizontal and one vertical layout. You can put any content in tabs starting from plain text and ending with video. It scales according to tab content and paragraph width.
[divider style=”shadow”]

Tabs style 1

[spacer size=”15″]
[tabs style=”1″]

[tab title=”Tab name”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum. [/tab]

[tab title=”Tab name”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum [/tab]

[tab title=”Tab name”] Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed luctus ligula a libero luctus a mollis leo commodo. [/tab]

[/tabs]
[spoiler title=”Get the code”]

[[tabs style="1"] 
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[/tabs]]

[/spoiler]

Tabs style 2

[spacer size=”15″]
[tabs style=”2″]
[tab title=”Tab name”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum. [/tab]
[tab title=”Tab name”] Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum [/tab]
[tab title=”Tab name”] Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed luctus ligula a libero luctus a mollis leo commodo. [/tab]
[tab title=”Tab name”] Aliquam fermentum vestibulum leo venenatis vehicula. Donec aliquet cursus ante a porta. Aliquam vehicula elementum diam, vitae cursus dui placerat id. Donec sed orci turpis, ut ornare metus. Nullam rutrum posuere luctus. Donec eget tortor erat, a interdum turpis. Maecenas at est molestie sapien adipiscing pretium. Quisque fringilla velit ac velit suscipit interdum. Etiam lacus dui, consequat ac viverra at, condimentum quis neque. [/tab]
[/tabs]
[spoiler title=”Get the code”]

[[tabs style="2"] 
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[/tabs]]

[/spoiler]

Tabs style 3

[spacer size=”15″]
[tabs style=”3″]
[tab title=”Tab name”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum. [/tab]
[tab title=”Tab name”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum [/tab]
[tab title=”Tab name”] Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed luctus ligula a libero luctus a mollis leo commodo. [/tab]
[tab title=”Tab name”] Aliquam fermentum vestibulum leo venenatis vehicula. Donec aliquet cursus ante a porta. Aliquam vehicula elementum diam, vitae cursus dui placerat id. Donec sed orci turpis, ut ornare metus. Nullam rutrum posuere luctus. Donec eget tortor erat, a interdum turpis. Maecenas at est molestie sapien adipiscing pretium. Quisque fringilla velit ac velit suscipit interdum. Etiam lacus dui, consequat ac viverra at, condimentum quis neque. [/tab]
[/tabs]
[spoiler title=”Get the code”]

[[tabs style="3"] 
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[/tabs]]

[/spoiler]
[column size=”1-2″]

Tabs style 1 inside 1/2 column

[spacer size=”15″]
[tabs style=”1″] [tab title=”Tab name”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum.Cras venenatis metus at mauris aliquet elementum. [/tab]
[tab title=”Tab name”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum. [/tab]
[tab title=”Tab name”] Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed luctus ligula a libero luctus a mollis leo commodo. [/tab] [/tabs]
[tab title=”Tab name”] Aliquam fermentum vestibulum leo venenatis vehicula. Donec aliquet cursus ante a porta. Aliquam vehicula elementum diam, vitae cursus dui placerat id. Donec sed orci turpis, ut ornare metus. Nullam rutrum posuere luctus. Donec eget tortor erat, a interdum turpis. Maecenas at est molestie sapien adipiscing pretium. Quisque fringilla velit ac velit suscipit interdum. Etiam lacus dui, consequat ac viverra at, condimentum quis neque. [/tab]
[spoiler title=”Get the code”]

[column size="1-2"]
[[tabs style="1"]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[/tabs]]
[/column]

[/spoiler]
[/column]
[column size=”1-2″ last=”1″]

Tabs style 2 inside 1/2 column

[spacer size=”15″]
[tabs style=”2″] [tab title=”Tab name”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum.am blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. [/tab]
[tab title=”Tab name”] Nulla suscipit tincidunt quam, nec dictum dolor lobortis eget. Pellentesque et sem felis, vel molestie metus. Cras venenatis metus at mauris aliquet elementum. In vitae tellus vitae quam placerat semper. Nam blandit tincidunt porta. Vivamus urna risus, pellentesque eget dapibus nec, auctor a neque. Maecenas viverra, dui a ultricies condimentum [/tab]
[tab title=”Tab name”] Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed luctus ligula a libero luctus a mollis leo commodo. [/tab]
[tab title=”Tab name”] Aliquam fermentum vestibulum leo venenatis vehicula. Donec aliquet cursus ante a porta. Aliquam vehicula elementum diam, vitae cursus dui placerat id. Donec sed orci turpis, ut ornare metus. Nullam rutrum posuere luctus. Donec eget tortor erat, a interdum turpis. Maecenas at est molestie sapien adipiscing pretium. Quisque fringilla velit ac velit suscipit interdum. Etiam lacus dui, consequat ac viverra at, condimentum quis neque. [/tab] [/tabs]
[spoiler title=”Get the code”]

[column size="1-2" last="1"]
[[tabs style="2"]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[tab title="Tab name"] Content [/tab]
[/tabs]]
[/column]

[/spoiler]
[/column]