Accordions
See /scripts/custom.js for required scripts.
The most basic of accordions, stripped of any styling but the functional bits. Make different kinds of accordions to your hearts desire!
Adding class .accordion__content--visible on the element with class .accordion__content will open/expand that section. All other sections are hidden by default.
- Click me 1
The content 1...and .accordion__content--visible
- Click me 2
The content 2...
- Click me 3
The content 3...
<ul class="accordion">
<li>
<div class="accordion__label"><b>Click me 1</b></div>
<div class="accordion__content accordion__content--visible">
<p>The content 1...</p>
</div>
</li>
<li>
<div class="accordion__label"><b>Click me 2</b></div>
<div class="accordion__content">
<p>The content 2...</p>
</div>
</li>
</ul>
Basic styling that should work for most project. Icons are helpful, this example uses a caret and also toggles .icon_rotate180 when the onclick fires. This one uses .accordion_style-basic and .accordion_color-light.
- Label 1
The content 1... and accordion__content--visible
- Label 2
The content 2...
- Label 3
The content 3...
<ul class="accordion accordion_style-basic accordion_color-light">
<li>
<div class="accordion__label">
Label 1
<svg class="accordion__label-icon icon icon_fill">
<use href="/images/core-icons.svg#icon-caret" />
</svg>
</div>
<div class="accordion__content accordion__content--visible">
<p>The content 1...</p>
</div>
</li>
<li>
<div class="accordion__label">
Label 2
<svg class="accordion__label-icon icon icon_fill icon_rotate180">
<use href="/images/core-icons.svg#icon-caret" />
</svg>
</div>
<div class="accordion__content">
<p>The content 2...</p>
</div>
</li>
</ul>
Alternative colors
.accordion_color-dark
- Label 1
The content 1...
- Label 2
The content 2...
- Label 3
The content 3...
.accordion_color-theme (based on $link-color)
- Label 1
Created with color variable defined in styles.scss. Results may vary.
- Label 2
The content 2...
- Label 3
The content 3...