TABS & TOGGLES SHORTCODES


How to add tabs or toggles to page

To add tabs or toggles to your page simply click on tabs or toggles shortcode button, that can be found integrated in default editor panel in visual mode.


Toggles

[toggle type=”white” title=”First Sample Toggle”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien mi. Pellentesque et tellus ut mi cursus auctor sit amet sit amet orci. In condimentum elementum elit, dictum varius felis commodo et. Sed consectetur, felis ac ultrices sollicitudin, lorem augue pretium nisi, et euismod lectus mi id velit. Suspendisse viverra arcu eleifend magna posuere at posuere nibh sagittis. Cras dolor odio, fermentum vitae scelerisque a, dictum vel ante. Duis tellus mauris, accumsan vel porta vitae, molestie nec elit. Fusce rhoncus pharetra mi sed consequat. Donec cursus faucibus felis ac bibendum.[/toggle]

[toggle type=”white” title=”Second Sample Toggle”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien mi. Pellentesque et tellus ut mi cursus auctor sit amet sit amet orci. In condimentum elementum elit, dictum varius felis commodo et. In condimentum elementum elit, dictum varius felis commodo et. Sed consectetur, felis ac ultrices sollicitudin, lorem augue pretium nisi, et euismod lectus mi id velit.Sed consectetur, felis ac ultrices sollicitudin, lorem augue pretium nisi, et euismod lectus mi id velit. Suspendisse viverra arcu eleifend magna posuere at posuere nibh sagittis. Cras dolor odio, fermentum vitae scelerisque a, dictum vel ante. Duis tellus mauris, accumsan vel porta vitae, molestie nec elit. Fusce rhoncus pharetra mi sed consequat. Donec cursus faucibus felis ac bibendum.[/toggle]

[toggle type=”white” title=”Third Sample Toggle”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien mi. Pellentesque et tellus ut mi cursus auctor sit amet sit amet orci. Suspendisse viverra arcu eleifend magna posuere at posuere nibh sagittis. Cras dolor odio, fermentum vitae scelerisque a, dictum vel ante. Duis tellus mauris, accumsan vel porta vitae, molestie nec elit. Fusce rhoncus pharetra mi sed consequat. Donec cursus faucibus felis ac bibendum.[/toggle][clear]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien mi. Pellentesque et tellus ut mi cursus auctor sit amet sit amet orci. In condimentum elementum elit, dictum varius felis commodo et. Sed consectetur, felis ac ultrices sollicitudin, lorem augue pretium nisi, et euismod lectus mi id velit. Suspendisse viverra arcu eleifend magna posuere at posuere nibh sagittis. Cras dolor odio, fermentum vitae scelerisque a, dictum vel ante. Duis tellus mauris, accumsan vel porta vitae, molestie nec elit. Fusce rhoncus pharetra mi sed consequat. Donec cursus faucibus felis ac bibendum.

Tabs

[tabgroup]

[tab title=”Tab 1″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien mi. Pellentesque et tellus ut mi cursus auctor sit amet sit amet orci. In condimentum elementum elit, dictum varius felis commodo et. Sed consectetur, felis ac ultrices sollicitudin, lorem augue pretium nisi, et euismod lectus mi id velit. Suspendisse viverra arcu eleifend magna posuere at posuere nibh sagittis. Cras dolor odio, fermentum vitae scelerisque a, dictum vel ante. Duis tellus mauris, accumsan vel porta vitae, molestie nec elit. Fusce rhoncus pharetra mi sed consequat. Donec cursus faucibus felis ac bibendum.[/tab]
[tab title=”Tab 2″]In condimentum elementum elit, dictum varius felis commodo et. Sed consectetur, felis ac ultrices sollicitudin, lorem augue pretium nisi, et euismod lectus mi id velit.[/tab]
[tab title=”Tab 3″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien mi.Cras dolor odio, fermentum vitae scelerisque a, dictum vel ante. Duis tellus mauris, accumsan vel porta vitae, molestie nec elit. Fusce rhoncus pharetra mi sed consequat. Donec cursus faucibus felis ac bibendum.[/tab]
[/tabgroup]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien mi. Pellentesque et tellus ut mi cursus auctor sit amet sit amet orci. In condimentum elementum elit, dictum varius felis commodo et. Sed consectetur, felis ac ultrices sollicitudin, lorem augue pretium nisi, et euismod lectus mi id velit. Suspendisse viverra arcu eleifend magna posuere at posuere nibh sagittis. Cras dolor odio, fermentum vitae scelerisque a, dictum vel ante. Duis tellus mauris, accumsan vel porta vitae, molestie nec elit. Fusce rhoncus pharetra mi sed consequat. Donec cursus faucibus felis ac bibendum.


Sample Code Toggles

[toggle type="white" title="First Sample Toggle"]Lorem ipsum dolor ... faucibus felis ac bibendum.[/toggle]
[toggle type="white" title="Second Sample Toggle"]Lorem ipsum dolor .. ac bibendum.[/toggle]
[toggle type="white" title="Third Sample Toggle"]Lorem ipsum dolor ... bibendum.[/toggle][clear]

Sample Code Tabs

[tabgroup]
[tab title="Tab 1"]Lorem ipsum dolor ... bibendum.[/tab]
[tab title="Tab 2"]In condimentum ... id velit.[/tab]
[tab title="Tab 3"]Lorem ipsum dolor ... bibendum.[/tab]
[/tabgroup]