Accordion

Vertically stacked content containers

Accordions are a great way of organizing lots of content within a single page by separating the content into collapsable containers. Accordions are made up of a accordion block and the following elements:

• accordion__list must be a ul tag
• accordion__item must be a li tag
• accordion__title a label for each content container
• accordion__content contains the content that will be expandable and collapsible

<div class="accordion">
  <ul class="accordion__list">
    <li class="accordion__item">
      <a href="#" class="accordion__title">Accordion item 1</a>
      <div class="accordion__content">
        ...
      </div>
    </li>
    <li class="accordion__item">
      <a href="#" class="accordion__title">Accordion item 2</a>
      <div class="accordion__content">
        ...
      </div>
    </li>
    <li class="accordion__item">
      <a href="#" class="accordion__title">Accordion item 3</a>
      <div class="accordion__content">
        ...
      </div>
    </li>
  </ul>
</div>
Copy

Apply the is-active modifier to the accordion__item element to toggle the open state for that items content. Combine this with JavaScript to give the accordion controls.

CSS variables

You can customize the accordion elements with the following CSS variables.

.accordion {
  --border-color: hsl(0deg, 0%, 90%, 1);
  --border-width: 1px;
}

/* Accordion item */
.accordion__item {
  --background-color: var(--color-white);
}

/* Accordion title */
.accordion__title {
  --background-color: transparent;
  --font-color: var(--color-black);
  --padding: 0.75rem 1rem;

  --active-background-color: var(--color-primary);
  --active-font-color: var(--color-primary-text);
  --hover-background-color: var(--color-light);
  --hover-font-color: var(--color-light-text);
}

/* Accordion content */
.accordion__content {
  --background-color: var(--color-white);
  --font-color: var(--color-black);
  --padding: 1rem;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.