🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%


The accordion creates stacked sections of content and allows the user to expand/collapse them.

Copy: View demo


All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

How to

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:

:root {
  // general
  --accordion-border-width: 1px;
  --accordion-border-color: var(--color-contrast-low);
  // icon
  --accordion-icon-size: 1em;
  --accordion-icon-stroke-width: 2px;

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 Accordion object:

// do this after your content has been added to the page
var accordion = document.getElementsByClassName('accordion')[0]; // your dynamically created accordion
new Accordion(accordion);

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us