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 |