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. Sed et nisi ut ante auctor aliquet nec vel velit. Vestibulum vel metus sit amet enim sollicitudin euismod eget nec justo. Aliquam vel massa vulputate, dictum nulla sodales, suscipit nisi. Aliquam imperdiet nibh gravida, sodales nulla a, venenatis neque. Aliquam viverra eros quis cursus sagittis. Sed lacinia neque a nulla bibendum hendrerit. Morbi non odio sed mauris euismod pulvinar quis quis nisl. Pellentesque semper nibh ac magna dapibus, eget sollicitudin risus condimentum. Nullam non lorem mollis, cursus libero non, consectetur erat.

Nam cursus urna sit amet lacus laoreet, pulvinar laoreet lectus lobortis. Donec dapibus ante eu tellus tempus sodales. Maecenas a massa eu turpis suscipit sollicitudin vitae et tellus. In ac ligula non mauris imperdiet auctor. Donec porta orci vestibulum commodo ullamcorper. Sed a nisl sed neque tristique volutpat eget eu augue. Aenean viverra ante id nunc lacinia aliquam. Phasellus molestie sapien at felis blandit placerat. In convallis velit tincidunt eleifend vulputate.

Sed vitae lectus dapibus, consequat nulla sit amet, gravida arcu. Suspendisse nec ipsum sed metus lacinia vestibulum. Morbi egestas ipsum sit amet lorem porttitor eleifend.

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