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. Nullam placerat nulla a sagittis sagittis. Curabitur tristique ligula ut elit luctus convallis. Praesent feugiat tellus et nisi rhoncus, vel mattis quam laoreet. Vestibulum ut nulla nec turpis pulvinar sodales sed vel purus. Proin blandit augue sit amet nunc sollicitudin iaculis. Sed interdum magna a nibh lacinia, in rhoncus ipsum porttitor. Sed a nisl sed neque tristique volutpat eget eu augue. Phasellus varius justo viverra, scelerisque nunc vitae, dapibus lorem. Ut vel nibh consectetur, sagittis tellus vel, ultricies purus. Proin molestie libero ac risus pellentesque mollis.

Etiam porttitor tellus sed mi vestibulum, sed ornare dui tempor. Nullam placerat nulla a sagittis sagittis. Proin vitae ipsum et nisl tristique posuere. Nam eleifend lectus rutrum dui pretium commodo. Maecenas eu ipsum in purus bibendum placerat tincidunt molestie ipsum. Nam vel libero id dui pellentesque fermentum. Sed et nisi ut ante auctor aliquet nec vel velit. Sed a elit lobortis, facilisis risus vel, fringilla enim. Proin viverra dui a quam sagittis, vitae condimentum dolor consectetur.

Mauris vel nisi feugiat, condimentum est vel, eleifend diam. Ut eu leo at libero tempor blandit. Nam pretium metus nec lacus auctor, in lacinia lorem ullamcorper. Nunc vitae metus nec nulla iaculis dictum nec in nunc. Nunc vitae metus nec nulla iaculis dictum nec in nunc. Cras sit amet eros eget augue ornare posuere ac vel odio. Nunc eleifend tortor quis blandit pellentesque.

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