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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pulvinar elit a felis vulputate volutpat. Etiam pretium massa malesuada vestibulum volutpat. Nullam et lacus non enim cursus varius eget vitae ante. Aliquam eu nisl ultrices, aliquet tortor faucibus, convallis magna. Cras tincidunt ipsum et scelerisque ultrices. Etiam ornare felis sit amet purus tristique, in placerat velit faucibus. Vestibulum porta justo a velit porttitor tincidunt. Nunc porta ante eu tellus venenatis suscipit. Nullam et lacus non enim cursus varius eget vitae ante. Pellentesque elementum erat sed justo rhoncus eleifend.

Nunc fermentum tortor pulvinar, auctor arcu sit amet, molestie ligula. Mauris facilisis felis eu nunc auctor, ac porttitor ante pellentesque. Donec laoreet augue vel neque tincidunt, porttitor rutrum dolor condimentum. Fusce ac neque congue urna tristique scelerisque. Vestibulum et odio dictum, elementum augue non, volutpat sapien. Mauris vel nisi feugiat, condimentum est vel, eleifend diam. Quisque vitae elit accumsan, mattis magna id, bibendum dui. Curabitur ullamcorper quam vel est imperdiet, a eleifend metus adipiscing. Donec semper arcu eget porta accumsan. Duis consectetur est eget mi consectetur, sed dignissim mauris lacinia.

Nunc vestibulum tortor volutpat orci tincidunt suscipit eget quis lorem. Ut egestas ligula malesuada, fermentum dui a, ultrices enim. In at augue ullamcorper, pellentesque arcu aliquet, ullamcorper turpis. Vestibulum id erat quis ante dictum consequat a sed dui. Cras hendrerit tortor eget tortor pharetra consequat. Sed id leo dictum, hendrerit urna vitae, ullamcorper felis. Nulla euismod lorem eu elit ornare, ac consectetur sem elementum. Nullam placerat nulla a sagittis sagittis. Sed eget nisi at metus varius gravida ac eu mi.

A collapsibles with multiple items.

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.
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.
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.

Collapse Content
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.

Explore More Shortcodes

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