🎉 Black Friday deal! 30% 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.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but 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.

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:

: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);

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 .js-accordion element:

<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. 

Project duplicated

Project created

Globals imported

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