Collapse
Control button to toggle the visibility of a panel element.
Control button to toggle the visibility of a panel element.
All components are based on CodyFrame.
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.
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.
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]);
Report a bug + changelog on Github ↗ | Suggest new components ↗
📢 We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.