Tabs and Toggles

 

Tabs

[tabgroup]
[tab title=”Tab Title #1″ icon=”pencil”]

Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

[/tab]

[tab title=”Tab Title #2″ icon=”cc-stripe” id=””]

The second tab…Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

[/tab]

[tab title=”Tab Title #3″ id=”my_tab”]

The third tab…. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.

Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

[/tab]

[/tabgroup]

Left Tab Side Navigation

[tabgroup nav=”left”]

[tab title=”Tab Title #1″ icon=”pencil”]

Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

[/tab]

[tab title=”Tab Title #2″ icon=”cc-stripe” id=””]

The second tab… The third tab…. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

[/tab]

[tab title=”Tab Title #3″]

The third tab…. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.

Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

[/tab]

[/tabgroup]

Right Tab Side Navigation

[tabgroup nav=”right”]
[tab title=”Tab Title #1″ icon=”pencil”]

Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

[/tab]

[tab title=”Tab Title #2″ icon=”cc-stripe” id=””]

The second tab…Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.[/tab]

[tab title=”Tab Title #3″]

The third tab…. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.

[/tab]
[/tabgroup]

 

[divider]

 

Toggles

One thing that may be confusing about this section is distinguishing the difference between “Toggles” and an “Accordion” — A toggle 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.

[toggle title=”Toggle Title #1″]content goes here…[/toggle]
[toggle title=”Toggle Title #2″]content goes here…[/toggle]
[toggle title=”Toggle Title #3″ last]content goes here…[/toggle]

[alert color=”info”]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.[/alert]

 

[divider]

 

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]] ... [[/accordion]] shortcode.
[accordion]
[toggle title=”Toggle Title #1″]content goes here…[/toggle]
[toggle title=”Toggle Title #2″]content goes here…[/toggle]
[toggle title=”Toggle Title #3″ last]content goes here…[/toggle]
[/accordion]