Go to homepage

Projects /


Control button to toggle the visibility of a panel element.

View Demo

How to

The Collapse component is used to control the visibility of a content panel.

To connect the panel element to its trigger (e.g., button), make sure the ID value of the first one is equal to the aria-controls value of the second one.

Height Animation #

If you want to animate the height of the content panel when changing its visibility, add the data-collapse-animate='on' attribute to the content panel.

Custom events #

If you need to change the visibility of your panel element without a trigger element (e.g., you want to show/hide the content as a consequence of user actions), you can use the collapseToggle custom event.

Here's how you can use this custom event:

function togglePanel(element) {
  var event = new CustomEvent('collapseToggle');

var collapsiblePanel = document.getElementsByClassName('js-collapse')[0]; // your panel element

Dynamic Content #

If your collapse element is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the Collapse object:

var collapse = document.getElementsByClassName('collapse')[0];
new Collapse(collapse);


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.