Introduction

Add a collapsible box with a title using the collapsibles shortcode. Often referred to as an accordion, the collapsibles shortcode is useful for adding content that you want the user to be able to toggle. Collapsibles allow for simple layouts where the content would be otherwise overwhelming. Users can choose which items they want to see by expanding/collapsing items.

There are many different options available to control the styles of the title and content area. The collapse and expand buttons can be customized. You can also expand items by default and control if only one item can be open at once.

Basic Examples

A collapsibles with a single item. Normally multiple items are included but not required.

Collapsibles Shortcode Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin sapien facilisis augue dapibus varius. Pellentesque semper nibh ac magna dapibus, eget sollicitudin risus condimentum. Praesent ac mi quis dui tincidunt suscipit. Donec molestie urna ut velit facilisis fermentum. Pellentesque semper nibh ac magna dapibus, eget sollicitudin risus condimentum. Nunc sed velit mollis enim gravida malesuada. Donec feugiat libero eget est eleifend, ut fermentum libero viverra. Donec ac erat non lectus sollicitudin luctus imperdiet eu velit. Aliquam dapibus metus vitae libero sollicitudin, vel sodales sapien tristique.

Nulla condimentum nisl vestibulum sapien feugiat, eget facilisis felis ornare. Ut nec massa a nulla tempor volutpat sed et purus. Maecenas sollicitudin purus sodales leo molestie interdum. Fusce ut enim id libero aliquet ullamcorper. Cras non erat egestas, vehicula orci ac, suscipit metus. Cras at dolor sed felis volutpat aliquet vel et enim. Praesent mollis lacus sit amet tortor malesuada placerat. Maecenas vestibulum lectus eu dui elementum, non porta magna dictum. Phasellus tincidunt dolor a sapien fringilla lacinia. Pellentesque egestas leo aliquam vehicula iaculis.

Donec tincidunt erat in vestibulum interdum. Vestibulum fermentum risus et mollis ullamcorper. In nec tellus at neque malesuada malesuada et sed nibh. Proin vehicula turpis eu arcu venenatis condimentum. Phasellus nec neque consequat, commodo nulla sit amet, pellentesque enim. Sed eu est ut diam aliquam eleifend sed eget neque. Nullam et lacus non enim cursus varius eget vitae ante. Fusce sagittis libero id lorem imperdiet, ac euismod ipsum venenatis. Phasellus non lacus convallis, ultrices purus eget, molestie risus.

A collapsibles with multiple items.

Collapse 1
Sed ante purus, eleifend id cursus euismod, convallis non diam. Integer quis nisi sit amet velit facilisis placerat eget sed nulla. Integer eget lorem et mauris rhoncus tincidunt. Nulla in nibh a nunc elementum ullamcorper. Aliquam eu leo quis turpis vestibulum bibendum sed vitae magna. Maecenas at diam ipsum, sed dignissim libero. In mattis aliquam nibh, at tempor ligula vestibulum vitae. Quisque sollicitudin gravida ipsum in pellentesque. In hac habitasse platea dictumst. Sed pretium fermentum enim, feugiat posuere urna fermentum in. Nullam convallis mattis nibh. Vestibulum feugiat, libero non auctor condimentum, orci urna imperdiet massa, vitae laoreet odio purus et justo. Suspendisse quis leo lacus. Nulla venenatis congue dolor, in consequat augue tempor ac.
Collapse 2
Sed ante purus, eleifend id cursus euismod, convallis non diam. Integer quis nisi sit amet velit facilisis placerat eget sed nulla. Integer eget lorem et mauris rhoncus tincidunt. Nulla in nibh a nunc elementum ullamcorper. Aliquam eu leo quis turpis vestibulum bibendum sed vitae magna. Maecenas at diam ipsum, sed dignissim libero. In mattis aliquam nibh, at tempor ligula vestibulum vitae. Quisque sollicitudin gravida ipsum in pellentesque. In hac habitasse platea dictumst. Sed pretium fermentum enim, feugiat posuere urna fermentum in. Nullam convallis mattis nibh. Vestibulum feugiat, libero non auctor condimentum, orci urna imperdiet massa, vitae laoreet odio purus et justo. Suspendisse quis leo lacus. Nulla venenatis congue dolor, in consequat augue tempor ac.
Collapse 3
Sed ante purus, eleifend id cursus euismod, convallis non diam. Integer quis nisi sit amet velit facilisis placerat eget sed nulla. Integer eget lorem et mauris rhoncus tincidunt. Nulla in nibh a nunc elementum ullamcorper. Aliquam eu leo quis turpis vestibulum bibendum sed vitae magna. Maecenas at diam ipsum, sed dignissim libero. In mattis aliquam nibh, at tempor ligula vestibulum vitae. Quisque sollicitudin gravida ipsum in pellentesque. In hac habitasse platea dictumst. Sed pretium fermentum enim, feugiat posuere urna fermentum in. Nullam convallis mattis nibh. Vestibulum feugiat, libero non auctor condimentum, orci urna imperdiet massa, vitae laoreet odio purus et justo. Suspendisse quis leo lacus. Nulla venenatis congue dolor, in consequat augue tempor ac.

Styling

Notice how the expand and collapse icons have been changed. The titles both have different colors. The content for each item has also been given a light gray background.

Colored Collapse Item
Collapse Content
Another Colored Item
Collapse Content

Link Titles

Sometimes you want one of the collapsible items in a series of items to be a link instead of a standard collapsible.

Regular Collapsible Item
Collapse Content
Linked Item - clicking on this item will take you to another page
Collapse Content
Another Regular Item
Collapse Content

Explore More Shortcodes

Buy Now - Only $30
View shortcodes used to create this page.

[intense_content_section]
<h2>Introduction</h2>
Add a collapsible box with a title using the collapsibles shortcode. Often referred to as an accordion, the collapsibles shortcode is useful for adding content that you want the user to be able to toggle. Collapsibles allow for simple layouts where the content would be otherwise overwhelming. Users can choose which items they want to see by expanding/collapsing items.

There are many different options available to control the styles of the title and content area. The collapse and expand buttons can be customized. You can also expand items by default and control if only one item can be open at once.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Basic Examples</h2>
A collapsibles with a single item. Normally multiple items are included but not required.
[intense_collapsibles]
[intense_collapse title="Collapsibles Shortcode Demo"][intense_filler paragraphs="3"][/intense_collapse]
[/intense_collapsibles]

A collapsibles with multiple items.

[intense_collapsibles]
[intense_collapse title="Collapse 1"]
Sed ante purus, eleifend id cursus euismod, convallis non diam. Integer quis nisi sit amet velit facilisis placerat eget sed nulla. Integer eget lorem et mauris rhoncus tincidunt. Nulla in nibh a nunc elementum ullamcorper. Aliquam eu leo quis turpis vestibulum bibendum sed vitae magna. Maecenas at diam ipsum, sed dignissim libero. In mattis aliquam nibh, at tempor ligula vestibulum vitae. Quisque sollicitudin gravida ipsum in pellentesque. In hac habitasse platea dictumst. Sed pretium fermentum enim, feugiat posuere urna fermentum in. Nullam convallis mattis nibh. Vestibulum feugiat, libero non auctor condimentum, orci urna imperdiet massa, vitae laoreet odio purus et justo. Suspendisse quis leo lacus. Nulla venenatis congue dolor, in consequat augue tempor ac.
[/intense_collapse]
[intense_collapse title="Collapse 2"]
Sed ante purus, eleifend id cursus euismod, convallis non diam. Integer quis nisi sit amet velit facilisis placerat eget sed nulla. Integer eget lorem et mauris rhoncus tincidunt. Nulla in nibh a nunc elementum ullamcorper. Aliquam eu leo quis turpis vestibulum bibendum sed vitae magna. Maecenas at diam ipsum, sed dignissim libero. In mattis aliquam nibh, at tempor ligula vestibulum vitae. Quisque sollicitudin gravida ipsum in pellentesque. In hac habitasse platea dictumst. Sed pretium fermentum enim, feugiat posuere urna fermentum in. Nullam convallis mattis nibh. Vestibulum feugiat, libero non auctor condimentum, orci urna imperdiet massa, vitae laoreet odio purus et justo. Suspendisse quis leo lacus. Nulla venenatis congue dolor, in consequat augue tempor ac.
[/intense_collapse]
[intense_collapse title="Collapse 3"]
Sed ante purus, eleifend id cursus euismod, convallis non diam. Integer quis nisi sit amet velit facilisis placerat eget sed nulla. Integer eget lorem et mauris rhoncus tincidunt. Nulla in nibh a nunc elementum ullamcorper. Aliquam eu leo quis turpis vestibulum bibendum sed vitae magna. Maecenas at diam ipsum, sed dignissim libero. In mattis aliquam nibh, at tempor ligula vestibulum vitae. Quisque sollicitudin gravida ipsum in pellentesque. In hac habitasse platea dictumst. Sed pretium fermentum enim, feugiat posuere urna fermentum in. Nullam convallis mattis nibh. Vestibulum feugiat, libero non auctor condimentum, orci urna imperdiet massa, vitae laoreet odio purus et justo. Suspendisse quis leo lacus. Nulla venenatis congue dolor, in consequat augue tempor ac.
[/intense_collapse]
[/intense_collapsibles]
[/intense_content_section]
[intense_content_section]
<h2>Styling</h2>
Notice how the expand and collapse icons have been changed. The titles both have different colors. The content for each item has also been given a light gray background.
[intense_collapsibles expand_icon="plus" collapse_icon="minus" icon_size="1"]
[intense_collapse title="Colored Collapse Item" title_background_color="primary" content_background_color="#dedede"]Collapse Content[/intense_collapse]
[intense_collapse title="Another Colored Item" title_background_color="success" content_background_color="#dedede"]Collapse Content[/intense_collapse]
[/intense_collapsibles]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Link Titles</h2>
Sometimes you want one of the collapsible items in a series of items to be a link instead of a standard collapsible.
[intense_collapsibles expand_icon="angle-down" collapse_icon="angle-up" icon_size="1"]
[intense_collapse title="Regular Collapsible Item" active="1"]Collapse Content[/intense_collapse]
[intense_collapse title="Linked Item - clicking on this item will take you to another page" external_link="http://codecanyon.net/item/intense-shortcodes-wordpress-plugin/5600492?ref=IntenseVisions"]Collapse Content[/intense_collapse]
[intense_collapse title="Another Regular Item"]Collapse Content[/intense_collapse]
[/intense_collapsibles]
[/intense_content_section]

[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]