Tabs Shortcodes

3 Alternative Styles

simple

[tabs style=”simple” position=”top-left”]

[tab_title][icon size=”small” icon=”male” style=”solid”][/tab_title]

[tab_content]

Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
[/tab_content]

[tab_title][icon size=”small” icon=”female” style=”solid”][/tab_title]

[tab_content]

Pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[/tabs]

button

[tabs style=”button” position=”top-left”]

[tab_title]Caption #1[/tab_title]

[tab_content]

Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[tab_title]Caption #2[/tab_title]

[tab_content]

Pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[/tabs]

none

[tabs style=”transparent” position=”top-left”]

[tab_title][icon size=”small” icon=”male” style=”solid”][/tab_title]

[tab_content]

Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[tab_title][icon size=”small” icon=”female” style=”solid”][/tab_title]

[tab_content]

Pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[/tabs]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[get_the_code]

simple

[tabs style=”simple” position=”top-left”]

[tab_title][icon size=”small” icon=”male” style=”solid”][/tab_title]

[tab_content]

Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
[/tab_content]

[tab_title][icon size=”small” icon=”female” style=”solid”][/tab_title]

[tab_content]

Pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[/tabs]

button

[tabs style=”button” position=”top-left”]

[tab_title]Caption #1[/tab_title]

[tab_content]

Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[tab_title]Caption #2[/tab_title]

[tab_content]

Pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[/tabs]

none

[tabs style=”transparent” position=”top-left”]

[tab_title][icon size=”small” icon=”male” style=”solid”][/tab_title]

[tab_content]

Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[tab_title][icon size=”small” icon=”female” style=”solid”][/tab_title]

[tab_content]

Pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.

[/tab_content]

[/tabs]

[/get_the_code]

[/toggle]

[divider]

Multiple Tab Positions

[one_half]

top-left

[tabs position=”top-left”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

[/one_half]

[one_half_last]

top-center

[tabs position=”top-center”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tab_content]

[/tabs]

[/one_half_last]

[one_half]

top-right

[tabs position=”top-right”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2 Tab[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

[/one_half]

[one_half_last]

bottom-left

[tabs position=”bottom-left”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

[/one_half_last]

[one_half]

bottom-center

[tabs position=”bottom-center”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

[/one_half]

[one_half_last]

bottom-right

[tabs position=”bottom-right”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

[/one_half_last]

[one_half]

left-top

[tabs position=”left-top”]

[tab_title]#1[/tab_title]

[tab_content]

Fusce mollis, nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

[/one_half]

[one_half_last]

right-top

[tabs position=”right-top”]

[tab_title]#1[/tab_title]

[tab_content]

Duis turpis eros, tincidunt id tincidunt at, tempor a nisi. Fusce turpis mi, sollicitudin non volutpat id, ornare at nunc. Vestibulum tristique molestie.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

[/one_half_last]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[get_the_code]

top-left

[tabs position=”top-left”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

top-center

[tabs position=”top-center”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tab_content]

[/tabs]

top-right

[tabs position=”top-right”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2 Tab[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

bottom-left

[tabs position=”bottom-left”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

bottom-center

[tabs position=”bottom-center”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

bottom-right

[tabs position=”bottom-right”]

[tab_title]#1[/tab_title]

[tab_content]

Nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

left-top

[tabs position=”left-top”]

[tab_title]#1[/tab_title]

[tab_content]

Fusce mollis, nibh et mattis interdum, odio enim ultrices risus, quis viverra odio est a odio. Etiam et gravida quam. Nunc ut purus ligula, sed tristique nibh.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

right-top

[tabs position=”right-top”]

[tab_title]#1[/tab_title]

[tab_content]

Duis turpis eros, tincidunt id tincidunt at, tempor a nisi. Fusce turpis mi, sollicitudin non volutpat id, ornare at nunc. Vestibulum tristique molestie.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Aenean ut tellus nisl, non pellentesque justo. Nam accumsan, lacus in tempor tempus, neque tellus accumsan nisl, ut egestas magna magna sit amet nulla.

[/tab_content]

[/tabs]

[/get_the_code]

[/toggle]

[divider_top]

Different Opening Method

[one_half]

click

[tabs type=”click” position=”top-left”]

[tab_title]#1[/tab_title]

[tab_content]

Tab 1: Duis turpis eros, tincidunt id tincidunt at, tempor a nisi. Fusce turpis mi, sollicitudin non volutpat id, ornare at nunc. Vestibulum tristique.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Tab 2: Nullam vel nibh id dolor tristique viverra. Aliquam blandit sapien massa. Aenean non facilisis quam. Donec mollis leo sed eros ullamcorper, in consequat magna volutpat. Nunc bibendum neque vitae felis feugiat fringilla et vitae nulla.

[/tab_content]

[/tabs]

[/one_half]

[one_half_last]

hover

[tabs type=”hover” position=”top-left”]

[tab_title]#1[/tab_title]

[tab_content]

Tab 1: sit amet turpis eu est laoreet porta. Praesent enim magna, sodales eu scelerisque a, euismod eget metus. Praesent neque enim.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Tab 2: sit amet turpis eu est laoreet porta. Praesent enim magna, sodales eu scelerisque a, euismod eget metus. Praesent neque enim.

[/tab_content]

[/tabs]

[/one_half_last]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[get_the_code]

click

[tabs type=”click” position=”top-left”]

[tab_title]#1[/tab_title]

[tab_content]

Tab 1: Duis turpis eros, tincidunt id tincidunt at, tempor a nisi. Fusce turpis mi, sollicitudin non volutpat id, ornare at nunc. Vestibulum tristique.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Tab 2: Nullam vel nibh id dolor tristique viverra. Aliquam blandit sapien massa. Aenean non facilisis quam. Donec mollis leo sed eros ullamcorper, in consequat magna volutpat. Nunc bibendum neque vitae felis feugiat fringilla et vitae nulla.

[/tab_content]

[/tabs]

hover

[tabs type=”hover” position=”top-left”]

[tab_title]#1[/tab_title]

[tab_content]

Tab 1: sit amet turpis eu est laoreet porta. Praesent enim magna, sodales eu scelerisque a, euismod eget metus. Praesent neque enim.

[/tab_content]

[tab_title]#2[/tab_title]

[tab_content]

Tab 2: sit amet turpis eu est laoreet porta. Praesent enim magna, sodales eu scelerisque a, euismod eget metus. Praesent neque enim.

[/tab_content]

[/tabs]

[/get_the_code]

[/toggle]

[divider]

[icon name=”lightbulb” size=”medium” style=”solid” shape=”circle”]

[tabs] Shortcode documentation

[tabs doc=”true”]

[divider]

[icon name=”lightbulb” size=”medium” style=”solid” shape=”circle”]

[tab_title] Shortcode documentation

[tab_title doc=”true”]

[divider]

[icon name=”lightbulb” size=”medium” style=”solid” shape=”circle”]

[tab_content] Shortcode documentation

[tab_content doc=”true”]