Tabs & Toggles

Organize your content in tabs and toggles, which can contain any combination of content, short codes and layouts.

Horizontal Tabs

Add any kind of content here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus. Aenean facilisis malesuada ante vel ornare. Morbi lobortis orci id interdum rutrum. Morbi ipsum elit, porttitor sit amet euismod a, cursus a lectus.

map-2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus. Aenean facilisis malesuada ante vel ornare. Morbi lobortis orci id interdum rutrum. Morbi ipsum elit, porttitor sit amet euismod a, cursus a lectus.

Proin non tortor sapien. Praesent lacinia varius erat, non molestie dui consequat ut. Suspendisse consequat est felis, id venenatis lacus condimentum sed. Morbi hendrerit nisi fringilla nunc vehicula placerat. Pellentesque tincidunt, quam at scelerisque sollicitudin, tortor tortor consectetur est, vitae accumsan massa velit sit amet risus. Donec tincidunt, tortor non tristique mattis, est ipsum faucibus quam, eu posuere purus nulla sit amet arcu. Aliquam egestas, sapien vel congue iaculis, sapien nisl luctus velit, nec accumsan lacus quam sit amet tellus. Sed pharetra magna felis, a volutpat sem luctus ut. Donec id accumsan risus. Nam vehicula neque a fringilla tincidunt. Mauris tellus sapien, volutpat nec convallis quis, faucibus ut ipsum. Proin tincidunt metus quis leo lacinia eleifend. Mauris posuere elit a ultrices viverra. Sed suscipit lacus est, nec sodales justo sagittis nec.

Example of a responsive YouTube video embed inside a tab:

 

Short Codes Also Work

Code example:

[thrive_tabs layout='horz'][thrive_tab headline='Title 1' no='1/3']Content 1[/thrive_tab][thrive_tab headline='Title 2' no='2/3']Content 2[/thrive_tab][thrive_tab headline='Title 3' no='3/3']Content 3[/thrive_tab][/thrive_tabs]

Vertical Tabs

map-2Add any kind of content here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus. Aenean facilisis malesuada ante vel ornare. Morbi lobortis orci id interdum rutrum. Morbi ipsum elit, porttitor sit amet euismod a, cursus a lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus. Aenean facilisis malesuada ante vel ornare. Morbi lobortis orci id interdum rutrum. Morbi ipsum elit, porttitor sit amet euismod a, cursus a lectus.

Proin non tortor sapien. Praesent lacinia varius erat, non molestie dui consequat ut. Suspendisse consequat est felis, id venenatis lacus condimentum sed. Morbi hendrerit nisi fringilla nunc vehicula placerat. Pellentesque tincidunt, quam at scelerisque sollicitudin, tortor tortor consectetur est, vitae accumsan massa velit sit amet risus. Donec tincidunt, tortor non tristique mattis, est ipsum faucibus quam, eu posuere purus nulla sit amet arcu. Aliquam egestas, sapien vel congue iaculis, sapien nisl luctus velit, nec accumsan lacus quam sit amet tellus. Sed pharetra magna felis, a volutpat sem luctus ut. Donec id accumsan risus. Nam vehicula neque a fringilla tincidunt. Mauris tellus sapien, volutpat nec convallis quis, faucibus ut ipsum. Proin tincidunt metus quis leo lacinia eleifend. Mauris posuere elit a ultrices viverra. Sed suscipit lacus est, nec sodales justo sagittis nec.

Example of a responsive YouTube video embed inside a tab:

 

Short Codes Also Work

Code example:

[thrive_tabs layout='vert'][thrive_tab headline='Title 1' no='1/3']Content 1[/thrive_tab][thrive_tab headline='Title 2' no='2/3']Content 2[/thrive_tab][thrive_tab headline='Title 3' no='3/3']Content 3[/thrive_tab][/thrive_tabs]

Content Toggle

Click to Expand

You can add any content, which only shows when the toggle is opened.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum ligula a neque blandit, in tristique mauris dictum. Phasellus pretium ac justo et sollicitudin. Pellentesque a nibh venenatis, fringilla dui vel, tempor felis.

Custom Toggle Title

Phasellus pretium ac justo et sollicitudin. Pellentesque a nibh venenatis, fringilla dui vel, tempor felis. Etiam consequat felis arcu. Aliquam quis venenatis felis, ut tincidunt tellus. Sed consequat facilisis enim, quis fringilla orci blandit id.

Lorem Ipsum

Morbi hendrerit nisi fringilla nunc vehicula placerat. Pellentesque tincidunt, quam at scelerisque sollicitudin, tortor tortor consectetur est, vitae accumsan massa velit sit amet risus. Donec tincidunt, tortor non tristique mattis, est ipsum faucibus quam, eu posuere purus nulla sit amet arcu. Aliquam egestas, sapien vel congue iaculis, sapien nisl luctus velit, nec accumsan lacus quam sit amet tellus. Sed pharetra magna felis, a volutpat sem luctus ut. Donec id accumsan risus. 

[thrive_toggles_group title=''][thrive_toggles title='Toggle Title' no='1/2']Content [/thrive_toggles][thrive_toggles title='Toggle 2 Title' no='2/2']Content 2 [/thrive_toggles][/thrive_toggles_group]

Accordion

The accordion is a variation of a content toggle. The difference is that in an accordion, one section is always expanded, but there’s never more than one section expanded. Whenever you expand one section, the previously open one automatically closes. Example:

Accordion Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, leo quis vestibulum laoreet, nulla odio hendrerit arcu, nec sodales eros lorem eu dolor. In ornare porttitor ante, ac placerat leo hendrerit sed. In vitae sodales massa. Nam iaculis laoreet lacus, ut facilisis urna blandit sit amet. Mauris hendrerit urna id urna pretium bibendum. Suspendisse id quam congue, tristique enim sit amet, congue sapien. Maecenas porta sagittis sapien, et pellentesque quam faucibus in. Aliquam tempus suscipit lorem, et malesuada dui rhoncus vitae. Duis eleifend tempus nisl at bibendum.

Accordion Section 2

Quisque nunc sapien, cursus id metus eget, bibendum pellentesque neque. Vivamus tristique dapibus turpis ac cursus. Aliquam in leo at ante ullamcorper ultrices. Quisque cursus volutpat metus. Curabitur scelerisque iaculis ante sit amet malesuada. Duis sit amet quam id felis dapibus vulputate vel vitae enim. Donec ultrices, diam et dignissim elementum, libero leo malesuada libero, in vulputate neque felis non sem. Vivamus sed leo placerat, rhoncus mi id, tristique dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Section 3 (these Are Custom Titles)

Duis condimentum tellus arcu, nec interdum lorem adipiscing at. Phasellus ac arcu congue, vulputate quam at, rhoncus velit. Sed sit amet tempus lacus, nec vestibulum sapien. Curabitur aliquet, nibh nec viverra ornare, nisl arcu ullamcorper leo, quis suscipit neque nunc a elit. Fusce a dolor sit amet enim egestas blandit. Sed sem nibh, pellentesque ut semper sed, dapibus sit amet sem. In hac habitasse platea dictumst. Phasellus luctus diam ut facilisis malesuada. Phasellus luctus neque hendrerit, gravida mi in, consectetur dui. Fusce id nulla at magna laoreet convallis quis a leo.

Another Accordion Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, leo quis vestibulum laoreet, nulla odio hendrerit arcu, nec sodales eros lorem eu dolor. In ornare porttitor ante, ac placerat leo hendrerit sed. In vitae sodales massa. Nam iaculis laoreet lacus, ut facilisis urna blandit sit amet. Mauris hendrerit urna id urna pretium bibendum. Suspendisse id quam congue, tristique enim sit amet, congue sapien. Maecenas porta sagittis sapien, et pellentesque quam faucibus in. Aliquam tempus suscipit lorem, et malesuada dui rhoncus vitae. Duis eleifend tempus nisl at bibendum.

Code Example:

[thrive_accordion_group title=''][thrive_accordion title='Accordion 1 Title' no='1/3' default='no']Content 1 [/thrive_accordion][thrive_accordion title='Accordion 2 Title' no='2/3' default='yes']Content 2 [/thrive_accordion][thrive_accordion title='Accordion 3 Title' no='3/3' default='no']Content 3 [/thrive_accordion][/thrive_accordion_group]