Accordions
Customizable styles for <details> disclosure elements designed to be used with the name attribute to create native HTML accordions or to stylise individual disclosure elements. Disabled by default, enable with $enable-accordions: true; in the configuration.scss document.
Accordion component (anchor)
A unique name attribute on individual <details> dislosure elements groups them together as a native HTML accordion. The method is now considered baseline across browsers, see Multiple named disclosure boxes on the MDN web docs or the WHATWG HTML standard specifications for more information.
Summary
Body text
Summary
Body text
Summary
Body text
Example HTML
The .accordion container class styles the individual <details> disclosure elements into the accordion example demonstrated above. The .details-body wrapper utility is currently still required to style the details content but the styles will eventually moved to the pseudo-element ::details-content selector when it becomes widely available.
<div class="accordion">
<details name="accordion" open>
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion">
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion">
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
</div>Single disclosure element (anchor)
A utility class for applying the accordion styles to single details disclosure elements.
Summary
Body text
Example HTML
<details class="details">
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>Single elements can also be used with the name attribute to create standalone accordion components.
Summary
Body text
Summary
Body text
Summary
Body text
Example HTML
Note: For demo purposes the .mb-1 utility included below overrides the margin below each <details> element of 1rem provided with the foundation styles.
<details name="accordion-floating" class="details mb-1" open>
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-floating" class="details mb-1">
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-floating" class="details">
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>Colors (anchor)
Each color has two modifiers classes that share the same values (e.g. .details-light and .accordion-light), either of these utilities can be included to apply the color to the accordions or individual details elements.
With $enable-theme-colors: true;
Summary light
Body text
Summary light
Body text
Summary light
Body text
Details light
Body text
Summary dark
Body text
Summary dark
Body text
Summary dark
Body text
Details dark
Body text
Example HTML
<div class="accordion accordion-light">
<details name="accordion-light" open>
<summary>Summary light</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-light">
<summary>Summary light</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-light">
<summary>Summary light</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
</div>
<details class="details details-light">
<summary>Details light</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<div class="accordion accordion-dark">
<details name="accordion-dark" open>
<summary>Summary dark</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-dark">
<summary>Summary dark</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-dark">
<summary>Summary dark</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
</div>
<details class="details details-dark">
<summary>Details dark</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>With $enable-primary-colors: true;
Summary blue
Body text
Summary blue
Body text
Summary blue
Body text
Details blue
Body text
Summary red
Body text
Summary red
Body text
Summary red
Body text
Details red
Body text
Summary green
Body text
Summary green
Body text
Summary green
Body text
Details green
Body text
Summary orange
Body text
Summary orange
Body text
Summary orange
Body text
Details orange
Body text
Summary cyan
Body text
Summary cyan
Body text
Summary cyan
Body text
Details cyan
Body text
Example HTML
<div class="accordion accordion-blue">
<details name="accordion-blue" open>
<summary>Summary blue</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-blue">
<summary>Summary blue</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-blue">
<summary>Summary blue</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
</div>
<details class="details details-blue mb-0">
<summary>Details blue</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<div class="accordion accordion-red">
<details name="accordion-red" open>
<summary>Summary red</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-red">
<summary>Summary red</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-red">
<summary>Summary red</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
</div>
<details class="details details-red mb-0">
<summary>Details red</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<div class="accordion accordion-green">
<details name="accordion-green" open>
<summary>Summary green</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-green">
<summary>Summary green</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-green">
<summary>Summary green</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
</div>
<details class="details details-green mb-0">
<summary>Details green</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<div class="accordion accordion-orange">
<details name="accordion-orange" open>
<summary>Summary orange</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-orange">
<summary>Summary orange</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-orange">
<summary>Summary orange</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
</div>
<details class="details details-orange mb-0">
<summary>Details orange</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<div class="accordion accordion-cyan">
<details name="accordion-cyan" open>
<summary>Summary cyan</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-cyan">
<summary>Summary cyan</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-cyan">
<summary>Summary cyan</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
</div>
<details class="details details-cyan mb-0">
<summary>Details cyan</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>Customize (anchor)
The default accordions property values can be customized in the properties.scss document. The styles can be customized in the _accordions.scss document in the [styles/components] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.
Properties
$summary-txt: var(--text) !default;
$summary-bg: var(--surf-1) !default;
$summary-ico: var(--summary-txt) !default;
$details-py: 0.5rem !default;
$details-px: 0.75rem !default;
$details-bd-color: var(--surf-3) !default;
$details-bd-width: 1px !default;
$details-radius: 0.188rem !default;Styles
// ----------------------------------------------------------
// Accordions
// ----------------------------------------------------------
@use "../../configuration" as *;
@use "../../properties" as *;
@use "icons" as *;
@if $enable-accordions {
:where(.details, .accordion) {
@if $enable-caret-down-svg and $enable-caret-up-svg {
--details-open: var(--caret-down);
--details-closed: var(--caret-up);
}
@else {
--details-open: #{$caret-down};
--details-closed: #{$caret-up};
}
max-inline-size: var(--details-max-width);
}
:where(.accordion details) {
margin-block-end: 0;
}
// Open and close icons.
:where(.details summary, .accordion summary):after {
--ico: var(--summary-ico);
--svg: var(--details-open);
@extend %icon-mask;
float: right;
margin-block-start: calc(var(--fs) / 4);
margin-inline-start: 1rem;
}
:where(.details[open] summary, .accordion details[open] summary):after {
--svg: var(--details-closed);
}
:where(.details summary, .accordion summary) {
--ico: var(--summary-ico);
color: var(--summary-txt);
font-weight: 600;
list-style-type: "";
padding-block: var(--details-py);
padding-inline: var(--details-px);
border: var(--details-bd-width) solid var(--details-bd-color);
border-radius: var(--details-radius);
background-color: var(--summary-bg);
}
.details summary::-webkit-details-marker {
display: none;
}
.accordion summary::-webkit-details-marker {
display: none;
}
:where(.accordion summary) {
border-radius: 0;
}
:where(.accordion details:not(:first-child) summary) {
border-block-start: none;
}
:where(.accordion details:first-child summary) {
border-start-start-radius: var(--details-radius);
border-start-end-radius: var(--details-radius);
}
:where(.accordion details:last-child summary) {
border-end-start-radius: var(--details-radius);
border-end-end-radius: var(--details-radius);
}
:where(.details[open] summary, .accordion [open] summary) {
margin-block-end: 0;
border-block-end: var(--details-bd-width) solid var(--details-bd-color);
border-end-start-radius: 0;
border-end-end-radius: 0;
}
:where(.accordion details[open]:last-child summary) {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
// Body
:where(.details-body, .details-body-code) {
padding-block: var(--details-py);
padding-inline: var(--details-px);
border: var(--details-bd-width) solid var(--details-bd-color);
border-block-start: none;
border-radius: var(--details-radius);
border-start-start-radius: 0;
border-start-end-radius: 0;
}
:where(.accordion .details-body) {
border-radius: 0;
}
:where(.accordion details:last-child[open] .details-body) {
border-end-start-radius: var(--details-radius);
border-end-end-radius: var(--details-radius);
}
:where(.details-body :last-child) {
--mb: 0;
}
:where(.details-body-code) {
--details-py: 0;
--details-px: 0;
}
:where(.details-body-code) pre {
border: none;
margin-block-end: 0;
}
.details-light, .accordion-light {
--summary-txt: #000;
--summary-ico: #000;
--summary-bg: var(--surf-1-light);
--details-bd-color: var(--surf-3-light);
}
.details-dark, .accordion-dark {
--summary-txt: #fff;
--summary-ico: #fff;
--summary-bg: var(--surf-1-dark);
--details-bd-color: var(--surf-3-dark);
}
@if $enable-primary-colors {
.details-blue, .accordion-blue {
--summary-txt: #fff;
--summary-ico: #fff;
--summary-bg: var(--blue);
--details-bd-color: var(--blue-lighter);
}
.details-red, .accordion-red {
--summary-txt: #fff;
--summary-ico: #fff;
--summary-bg: var(--red);
--details-bd-color: var(--red-lighter);
}
.details-green, .accordion-green {
--summary-txt: #fff;
--summary-ico: #fff;
--summary-bg: var(--green);
--details-bd-color: var(--green-lighter);
}
.details-orange, .accordion-orange {
--summary-txt: #000;
--summary-ico: #000;
--summary-bg: var(--orange);
--details-bd-color: var(--orange-darker);
}
.details-cyan, .accordion-cyan {
--summary-txt: #000;
--summary-ico: #000;
--summary-bg: var(--cyan);
--details-bd-color: var(--cyan-darker);
}
} // END [@if/primary-colors]
}