Back to all resources
accordion
UI behavior

Auto-collapse accordion in Webflow

By Digipop
This JavaScript code snippet uses jQuery to implement the behavior of an accordion component. When an element with the attribute data-click="accordion-el" is clicked, the code checks if the clicked element does not have the class 'open'. If it does not, the code first triggers a click event on any other elements that have the 'open' class to close them. It then adds the 'open' class to the clicked element, effectively opening it. If the clicked element already has the 'open' class, the class is removed, and the element is closed.

This ensures that only one accordion element is open at a time, and clicking an already open element will close it.