Text : Boxes : Toggles & Tabs

[teaser]Simply click on the toggle text or ‘plus button’ to expand or collapse. The “accordion” style is set to allow only one expanded element so expanding another one will close the previously expanded one.[/teaser]

Toggles

[one_half]

[fancy_header]Framed Style[/fancy_header]

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

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

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

[/one_half]
[one_half_last]

[fancy_header]Framed Accordion Style[/fancy_header]

[accordion_group]

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

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

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

[/accordion_group]

[/one_half_last]

[one_half]

[fancy_header]Minimalist Style[/fancy_header]

[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]

[/one_half]
[one_half_last]

[fancy_header]Minimalist Accordion Style[/fancy_header]

[accordion_group]

[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]

[/accordion_group]

[/one_half_last]

Tabs

[teaser]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.[/teaser]

[fancy_header]Framed Style[/fancy_header]

[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]

[fancy_header]Minimalist Style[/fancy_header]

[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]

[fancy_header]Butt0n Tabs[/fancy_header]

[tabs_button]

[tab title=”tab1″]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 title=”tab2″]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 title=”tab3″]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]

[/tabs_button]

[fancy_header]Vertical Tabs[/fancy_header]

[tabs_vertical]

[tab title=”tab1″]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 title=”tab2″]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 title=”tab3″]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]

[/tabs_vertical]

 

Leave a Reply

Your email address will not be published. Required fields are marked *