Accordions
Styles for grouping multiple <details> disclosure elements together using the name attribute to create stylised native HTML accordion components. Disabled by default, enable with $enable-accordions: true; in the _configuration.scss document.
Accordion component (anchor)
Native HTML accordions are created by adding a common name attribute to multiple <details> disclosure elements, the accordion component styles modify the default styles for <details> disclosure elements that are on display throughout the site wherever code demos are included, e.g. the 'Example HTML' as provided below.
Summary
Body text
Summary
Body text
Summary
Body text
Example HTML
The .accordion wrapper stylises all individual <details> elements contained within into the accordion style demonstrated. The .details-body wrapper is required for the details inner content but the styles will eventually be moved to the pseudo-element ::details-content selector when it becomes available.
<div class="accordion">
<details name="accordion-demo" open>
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-demo">
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>
<details name="accordion-demo">
<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 individual details disclosure elements is also provided.
Summary
Body text
Example HTML
<details class="details">
<summary>Summary</summary>
<div class="details-body">
<p>Body text</p>
</div>
</details>The single element utility can also be used with the name attribute to create standalone <details> disclosure elements that behave like the accordion component.
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]
}