--- layout: default route: usage title: Usage subtitle: Easily make any element collapsible --- {% capture collapsible_card %}

Card title

“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”

Jeff Atwood

{% endcapture %} {% capture collapsible_panel %} {% endcapture %} {% capture collapsible_message %}

Hello World. Collapse/Expand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

{% endcapture %} {% capture collapsible_accordion %}

Question 1 Collapse/Expand

Question 2 Collapse/Expand

Question 3 Collapse/Expand

{% endcapture %} {% capture collapsible_accordion_multiple %}

Question 1 Collapse/Expand

Question 2 Collapse/Expand

Question 3 Collapse/Expand

{% endcapture %} {% capture caution_message_padding %}

CAUTION
Element with is-collapsible class CAN NOT contains padding. That why in case you'd like to use it with message component you need to wrap the message-body content into a new container with the class message-body-content to get it work. Globally, if the collapsible element has padding you'll need to remove padding from it and wrap its content into a new div with the padding.

{% endcapture %} {% capture caution_panel %}

CAUTION
If you use Collapsible with Panel component don't forget to wrap panel content within a container which contains is-collapsible class.

{% endcapture %}

Collapsible component only provides collapse/expand management. Visual stylish is in your hand and can be applied by following Bulma customization steps.

INFO
When a trigger is clicked and element expanded, all triggers related to the current collapsible element will receive the is-active class. This way you are able to customize trigger based on collapsible element state (expanded/collapsed)

Making an element Collapsible only requires few steps:

Make sure the DOM element you want to be collapsible has an ID
Add is-collapsible class to the DOM element you want to be collapsible
If you want to open (expand) element by default add is-active class
Set triggers by adding data-action="collapse" and data-target="#{ELEMENT_ID}" attributes to the element(s).
Instanciate all instances through JavaScript. See JavaScript API to find out how.

{% include anchor.html name="Collapsible Card" %}

{% include snippet.html content=collapsible_card %}

{% include anchor.html name="Collapsible Panel" %} {{ caution_panel }}

{% include snippet.html content=collapsible_panel %}

{% include anchor.html name="Collapsible Message" %} {{ caution_message_padding }}

{% include snippet.html content=collapsible_message %}

{% include anchor.html name="Accordion" %}

You can easily create an Accordion like component using message element with Collapsible

When you want to manage multiple collapsible elements and link them add data-parent attribute on the collapsible element with the parent container ID as value. See below example where we wrapped all collapsible messages within a container with id accordion_first.

{% include snippet.html content=collapsible_accordion %}

Allow multiple elements opened at the same time (means does not close previously opened element when opening the new one), set allowMultiple option to True.
See JavaScript API to find out how.

{% include snippet.html content=collapsible_accordion_multiple %}