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 collapsable
  • Accordion item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion item 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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.

  • Accordion item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion item 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Variables

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

Variable Type Default Value
$accordion-background border $white
$accordion-border border 1px solid #e6e6e6
$accordion-border-inner border $accordion-border
$accordion-hover-background color $primary
$accordion-hover-color color getTextColor($primary)
$accordion-active-background color $primary
$accordion-active-color color getTextColor($primary)
$accordion-title-color color $black
$accordion-title-padding padding 0.75rem 1rem
$accordion-content-padding units 1rem