Tabs & Toggles

Tabs

[tabs style="framed" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"] [tab_1]Tab 1 content...[/tab_1] [tab_2]Tab 2 content...[/tab_2] [tab_3]Tab 3 content...[/tab_3] [/tabs]

Options

Argument	Default	Description
style	framed	Style of the tabs – framed, open.
nav	tabs	Type of navigation for the the tabs – tabs, pills.
height	false	Fixed height for tabs – true, false

Examples

[raw]

Framed, with tabs

[tabs style="framed" nav="tabs" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Open, with tabs

[tabs style="open" nav="tabs" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Framed, with pills

[tabs style="framed" nav="pills" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Open, with pills

[tabs style="open" nav="pills" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

[/raw] [divider]

Toggles

One thing that may be confusing about this section is distinguishing the difference between “Toggles” and an “Accordion” — So, let’s clear that up first. A toggle essentially allows you to hide a piece of content and let the user open and close it. You can stack many of these toggles in a row for a nice way of organizing content in your page or post. Then, in addition to that you can wrap your set of toggles with the “accordion” shortcode to group them together. This means that your set of toggles will now take on the traditional accordion concept of only allowing one toggle open at any given time.

[raw]

Toggle #1

Content of toggle #1.

Toggle #2

Content of toggle #2.

Toggle #3

Content of toggle #3.

[/raw]

[raw]
[toggle title="Toggle #1"]Content of toggle #1.[/toggle]
[toggle title="Toggle #2"]Content of toggle #2.[/toggle]
[toggle title="Toggle #3" last]Content of toggle #3.[/toggle]
[/raw]

Note: If this is a group of toggles that aren’t wrapped in an accordion, as the above example above shows, you can use the word “last” on the last toggle to the theme can apply some margin below the last toggle to separate from any content to come after. This is optional.

Options

Argument	Default	Description
title (required)	None	Title of the toggle.

Accordion

So now that you’ve got a set of toggles, what if you want to group them together as a traditional accordion? You can do this simply wrapping your toggles in the [accordion] shortcode.

[raw] [accordion]

[raw]
[accordion]
[toggle title="Toggle #1"]Content of toggle #1.[/toggle]
[toggle title="Toggle #2"]Content of toggle #2.[/toggle]
[toggle title="Toggle #3"]Content of toggle #3.[/toggle]
[/accordion]
[/raw]