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. All variations share the same SCSS/JS code. They only 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.
You can edit the following data attributes to affect the component behavior:
- data-animation: animate height of the content items when expanding/collapsing them; value 'on'/'off'; default value = off.
- data-multi-items: allow multiple accordion items to be open at the same time; value 'on'/'off'; default value = 'on'.
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