Toggles & Tabs

Toggles allow you to provide additional context-related information that can be initially hidden to streamline your page presentation. Simply click on the toggle text or ‘plus button’ to expand or collapse. Tabs are a great way to show different aspects related to the same topic or object. Click the tab labels to quickly move between them.

Toggles

Framed Style

[toggle_framed title=”Your title text here”]Expanded area text goes here. This is just placeholder text… Lorem ipsum dolor sit amet, adipiscing elit. Aliquam dictum metus ipsum, ac tristique mauris. Donec aliquet leo eget risus tempor sed bibendum ipsum dignissim. Nam ante ipsum, dictum egestas pharetra ac, tempus ac libero. Aenean non ornare lectus.[/toggle_framed]

[toggle_framed title=”Your title text here”]Expanded area text goes here. This is just placeholder text… Lorem ipsum dolor sit amet, adipiscing elit. Aliquam dictum metus ipsum, ac tristique mauris. Donec aliquet leo eget risus tempor sed bibendum ipsum dignissim. Nam ante ipsum, dictum egestas pharetra ac, tempus ac libero. Aenean non ornare lectus.[/toggle_framed]

[toggle_framed title=”Your title text here”]Expanded area text goes here. This is just placeholder text… Lorem ipsum dolor sit amet, adipiscing elit. Aliquam dictum metus ipsum, ac tristique mauris. Donec aliquet leo eget risus tempor sed bibendum ipsum dignissim. Nam ante ipsum, dictum egestas pharetra ac, tempus ac libero. Aenean non ornare lectus.[/toggle_framed]

Minimalist Style

[toggle title=”Your title text here”]Expanded area text goes here. This is just placeholder text…[/toggle]
[toggle title=”Your title text here”]Expanded area text goes here. This is just placeholder text…[/toggle]
[toggle title=”Your title text here”]Expanded area text goes here. This is just placeholder text…[/toggle]

[divider_padding]

Tabs

Framed Style

[framed_tabs tab1=”Tab 1″ tab2=”Tab 2″ tab3=”Tab 3″]

[tab]Tab content 1 here. This is just placeholder text… Lorem ipsum dolor sit amet, adipiscing elit. Aliquam dictum metus ipsum, ac tristique mauris. Donec aliquet leo eget risus tempor sed bibendum ipsum dignissim.[/tab]

[tab]Tab content 2 here. This is just placeholder text… Proin sit amet nulla eget enim tempor tristique. Suspendisse hendrerit imperdiet felis, ut convallis lorem facilisis id. Curabitur fermentum faucibus blandit. Mauris libero augue, aliquet quis elementum.[/tab]

[tab]Tab content 3 here. This is just placeholder text… Vivamus sociis  natoque penatibus et magnis dis parturient montes, nascetur ridiculus  mus. Mauris libero augue, aliquet quis elementum sit amet, molestie non  ligula.[/tab]

[/framed_tabs]

Minimalist Style

[minimal_tabs tab1=”Tab 1″ tab2=”Tab 2″ tab3=”Tab 3″]

[tab]Tab content 1 here. This is just placeholder text… Lorem ipsum dolor sit amet, adipiscing elit. Aliquam dictum metus ipsum, ac tristique mauris. Donec aliquet leo eget risus tempor sed bibendum ipsum dignissim. In tempor faucibus risus, posuere vehicula quam iaculis et.[/tab]

[tab]Tab content 2 here. This is just placeholder text… Proin sit amet nulla eget enim tempor tristique. Suspendisse hendrerit imperdiet felis, ut convallis lorem facilisis id. Curabitur fermentum faucibus blandit. Mauris libero augue, aliquet quis elementum.[/tab]

[tab]Tab content 3 here. This is just placeholder text… Vivamus sociis  natoque penatibus et magnis dis parturient montes, nascetur ridiculus  mus. In tempor faucibus risus, posuere vehicula quam iaculis et. Mauris libero augue, aliquet quis elementum sit amet, molestie non  ligula.[/tab]

[/minimal_tabs]