Toggles & tabs

Toggles

Here is a basic example of toggled content. You can place any content inside the toggle shortcode.

Click to expand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum pretium tortor id scelerisque. Aenean tincidunt volutpat scelerisque. Curabitur at tempor felis. Maecenas consequat feugiat adipiscing. Cras eleifend sagittis felis eu mattis. Aliquam eleifend iaculis odio eget tincidunt.

Code:

[toggle]
  Toggle content...
[/toggle]

Example of toggled content which is displayed expanded by default:

Click here to fold this content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum pretium tortor id scelerisque. Aenean tincidunt volutpat scelerisque. Curabitur at tempor felis. Maecenas consequat feugiat adipiscing. Cras eleifend sagittis felis eu mattis. Aliquam eleifend iaculis odio eget tincidunt.

Code:

[toggle title="Click here to fold this content" default="show"]
  Toggle content...
[/toggle]

Toggles with different heading types:

Toggle with a h1 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum pretium tortor id scelerisque. Aenean tincidunt volutpat scelerisque. Curabitur at tempor felis. Maecenas consequat feugiat adipiscing. Cras eleifend sagittis felis eu mattis. Aliquam eleifend iaculis odio eget tincidunt.

Code:

[toggle title="Toggle with a h1 heading" heading_type="h1"]
  Toggle content...
[/toggle]

Toggle with a h2 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum pretium tortor id scelerisque. Aenean tincidunt volutpat scelerisque. Curabitur at tempor felis. Maecenas consequat feugiat adipiscing. Cras eleifend sagittis felis eu mattis. Aliquam eleifend iaculis odio eget tincidunt.

Code:

[toggle title="Toggle with a h2 heading" heading_type="h2"]
  Toggle content...
[/toggle]

Toggle with a h3 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum pretium tortor id scelerisque. Aenean tincidunt volutpat scelerisque. Curabitur at tempor felis. Maecenas consequat feugiat adipiscing. Cras eleifend sagittis felis eu mattis. Aliquam eleifend iaculis odio eget tincidunt.

Code:

[toggle title="Toggle with a h3 heading" heading_type="h3"]
  Toggle content...
[/toggle]

Toggle with a h4 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum pretium tortor id scelerisque. Aenean tincidunt volutpat scelerisque. Curabitur at tempor felis. Maecenas consequat feugiat adipiscing. Cras eleifend sagittis felis eu mattis. Aliquam eleifend iaculis odio eget tincidunt.

Code:

[toggle title="Toggle with a h4 heading" heading_type="h4"]
  Toggle content...
[/toggle]

Toggle with a h5 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum pretium tortor id scelerisque. Aenean tincidunt volutpat scelerisque. Curabitur at tempor felis. Maecenas consequat feugiat adipiscing. Cras eleifend sagittis felis eu mattis. Aliquam eleifend iaculis odio eget tincidunt.

Code:

[toggle title="Toggle with a h5 heading" heading_type="h5"]
  Toggle content...
[/toggle]

Toggle with a h6 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum pretium tortor id scelerisque. Aenean tincidunt volutpat scelerisque. Curabitur at tempor felis. Maecenas consequat feugiat adipiscing. Cras eleifend sagittis felis eu mattis. Aliquam eleifend iaculis odio eget tincidunt.

Code:

[toggle title="Toggle with a h6 heading" heading_type="h6"]
  Toggle content...
[/toggle]

Top

Tabs

Here an example of tabbed content. Tabs are completely flexible, you can place any content inside.

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum pretium tortor id scelerisque. Aenean tincidunt volutpat scelerisque. Curabitur at tempor felis. Maecenas consequat feugiat adipiscing. Cras eleifend sagittis felis eu mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend iaculis odio eget tincidunt. In nec erat risus, mattis adipiscing enim. Quisque vel pellentesque sapien. Fusce condimentum est sit amet lacus interdum pellentesque a quis mi. Praesent elementum turpis eu ligula blandit molestie.

Tab 2

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec orci risus, porta ac commodo ut, gravida eget libero. Vestibulum tincidunt risus at nulla vulputate volutpat. Aliquam lobortis lectus sit amet magna interdum et adipiscing justo convallis. Phasellus vulputate nunc neque. Maecenas rhoncus magna vel massa fringilla vitae viverra nibh bibendum. Nullam egestas pulvinar elit, at adipiscing dui condimentum ac. Suspendisse potenti. Quisque feugiat justo eget eros convallis in rutrum arcu imperdiet. Sed tempus, erat in hendrerit adipiscing, diam turpis fermentum metus, et sagittis mi turpis a nibh. Proin felis neque, mattis et dignissim at, convallis porttitor quam.

Tab 3

Maecenas pulvinar tortor vel purus ultricies ullamcorper. Etiam eu auctor purus. Duis ac nunc enim, eu semper diam. Sed dignissim metus nec lacus gravida tristique. Vivamus convallis magna vitae est mollis fermentum. Praesent imperdiet tincidunt cursus. Suspendisse lobortis mauris non orci scelerisque cursus. Integer ullamcorper, purus in adipiscing ultrices, augue mauris sodales risus, a fringilla ipsum nibh nec ante. Nulla scelerisque, ligula in adipiscing lacinia, dolor odio pulvinar massa, non volutpat nibh mi sed tellus. Sed aliquam feugiat malesuada.

Code:

[tabs]

[tab title="Tab 1"]
  Tab 1 content...
[/tab]

[tab title="Tab 2"]
  Tab 2 content...
[/tab]

[tab title="Tab 3"]
  Tab 3 content...
[/tab]

[/tabs]