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. Quisque tempor metus vel nisl mollis, sit amet sollicitudin elit pretium. Pellentesque semper nibh ac magna dapibus, eget sollicitudin risus condimentum. Pellentesque ac sapien luctus est pellentesque cursus sed vitae lectus. Cras bibendum nunc et turpis facilisis, id porttitor est ultricies. Nullam suscipit massa non purus hendrerit, pellentesque semper augue consequat. Vivamus ac leo mollis, posuere sapien id, accumsan sapien. Proin non tortor venenatis nisl condimentum viverra sit amet eu ligula. Vivamus suscipit magna vitae placerat dapibus. Vestibulum imperdiet neque id consectetur eleifend. Proin ullamcorper diam et semper tristique.

Donec varius magna nec ante vehicula pulvinar. Morbi at libero at sapien ultricies feugiat in quis orci. Duis consectetur est eget mi consectetur, sed dignissim mauris lacinia. Nam pretium metus nec lacus auctor, in lacinia lorem ullamcorper. Maecenas ac tortor eu est porttitor sodales in id odio. Mauris porta nulla et tortor convallis, id posuere est rutrum. Etiam vulputate lectus eget enim porttitor euismod. Donec in tellus ut libero scelerisque venenatis. Maecenas blandit orci convallis mi accumsan, sed venenatis orci accumsan. Donec at massa id leo imperdiet tincidunt id at ipsum. Donec porta orci vestibulum commodo ullamcorper. Sed et nisi ut ante auctor aliquet nec vel velit.

Donec euismod purus id blandit faucibus. Etiam sit amet arcu egestas, viverra dui sit amet, sodales urna. Etiam tristique leo at arcu tempus, in dapibus dui tempor. Donec at massa id leo imperdiet tincidunt id at ipsum. Maecenas blandit orci convallis mi accumsan, sed venenatis orci accumsan. Aenean vehicula arcu in imperdiet posuere. Praesent feugiat tellus et nisi rhoncus, vel mattis quam laoreet. Pellentesque posuere neque sed dignissim gravida. Suspendisse vitae ipsum tempus, accumsan ante vel, venenatis erat. Sed mattis augue ut blandit eleifend. Quisque tempor metus vel nisl mollis, sit amet sollicitudin elit pretium. Sed ac sapien in sapien aliquet 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"]