The accordion creates stacked sections of content and allows the user to expand/collapse them.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
The accordion component is used to condense related content sections by enabling the user to expand/collapse them. In other words, it's used to save space and group together related content.
If you want to allow multiple accordion items to be open at the same time, set
data-multi-items="on" to the
.js-accordion element (default is off).
The component includes the following custom properties:
Dynamic Content #
If your accordion component 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
// do this after your content has been added to the page
var accordion = document.getElementsByClassName('accordion'); // your dynamically created accordion
Deep Linking #
If you want to be able to share the link to a specific accordion panel, you can add the
data-deep-link="on" attribute to the
<ul class="accordion js-accordion" data-deep-link="on">
<!-- accordion content here -->
Each time a new panel is selected, the hash of the page is updated with the panel id.