Tabs shortcode arguments
| Classes |
| ||||||||
tab_classes | Classes for all child items. |
Tab shortcode arguments
| Classes |
| ||||
title | Tab title. | ||||
icon | Icon (classes) to use in the title. | ||||
label | Text for a label to use in the title. | ||||
label_classes | Classes for a label to use in the title. |
Tabs are converted to accordions on AMP pages.
Basic tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Basic pointing tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs pointing]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab active title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Notes
Adding an .active class can make another tab active by default on page load.Attached tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs top attached tab_classes="bottom attached"]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab disabled title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Notes
Adding a .disabled class can disable a tab item.Attached pointing tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs top attached pointing tab_classes="bottom attached"]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Tabular attached tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs top attached tabular tab_classes="bottom attached"]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Secondary tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs secondary]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Secondary basic tabs with basic content
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs secondary tab_classes="basic paddingless"]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Secondary pointing tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs secondary pointing]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Secondary pointing basic tabs with basic content
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs secondary pointing tab_classes="basic paddingless"]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Tabular right aligned tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
Tab 4 title
Tab 4 content
[tabs top attached tabular tab_classes="bottom attached"]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab right title="Tab 3 title"]Tab 3 content[/tab]
[tab right title="Tab 4 title"]Tab 4 content[/tab]
[/tabs]Notes
Adding the .right class to the tab makes it's item float right.Compact tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs compact]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Notes
Adding the .compact class prevents the menu from extending to full width.Compact center aligned tabs
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs compact center aligned]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]Notes
Compact menu can be center aligned.Portfolio example
2011
2012
2013
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
2014
Projects 2016
Projects 2015
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Project 2014
Lorem ipsum
Dolor sit amet 332.
Eu nec esse splendide
7+ mel meis tollit
Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam. Oblique fuisset postulant ut has. Mea ut purto affert.
Projects 2013
2015
2016
2017
[tabs huge horizontal bulleted center aligned link list tab_classes="basic paddingless"]
[tab title="2011"]
[grid four column stackable]
[column]
[dimmer image="//placehold.co/300x240"]
[header inverted]Job name[/header]
[button inverted link="#"]Read more[/button]
[/dimmer]
[/column]
[column]
[dimmer image="//placehold.co/300x240"]
[header inverted]Job name[/header]
[button inverted link="#"]Read more[/button]
[/dimmer]
[/column]
[column]
[dimmer image="//placehold.co/300x240"]
[header inverted]Job name[/header]
[button inverted link="#"]Read more[/button]
[/dimmer]
[/column]
[column]
[dimmer image="//placehold.co/300x240"]
[header inverted]Job name[/header]
[button inverted link="#"]Read more[/button]
[/dimmer]
[/column]
[/grid]
[/tab]
[tab title="2012"]
...
[/tab]
[tab title="2013"]
...
[/tab]
[tab title="2014"]
[page title="Portfolio" wpautop="false"]
[/tab]
[tab title="2015"]
...
[/tab]
[tab title="2016"]
...
[/tab]
[tab title="2017"]
...
[/tab]
[/tabs]Notes
Tabs can contain other shortcodes.Tabs with icons
Tab 1 title
Tab 1 content
Tab 2 title
Tab 2 content
Tab 3 title
Tab 3 content
[tabs]
[tab title="Tab 1 title" icon="home"]Tab 1 content[/tab]
[tab title="Tab 2 title" icon="red fire"]Tab 2 content[/tab]
[tab title="Tab 3 title" icon="mail"]Tab 3 content[/tab]
[/tabs]Tabs with labels
Tab 1 title12
Tab 1 content
Tab 2 titleBlue
Tab 2 content
Tab 3 title23
Tab 3 content
[tabs]
[tab title="Tab 1 title" label="12"]Tab 1 content[/tab]
[tab title="Tab 2 title" label="Blue" label_classes="blue"]Tab 2 content[/tab]
[tab title="Tab 3 title" label="23" label_classes="circular teal"]Tab 3 content[/tab]
[/tabs]