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.

To initially hide the content panel, use the is-hidden class.

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');
  element.dispatchEvent(event);
};

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