Accordion

An accordion is a <details> element. No script, no class. The summary gets a chevron that turns when the section opens. Browsers that support ::details-content and interpolate-size also animate the height, and the rest open and close instantly.

<details open>
  <summary>What is Pico Reforged?</summary>
  <p>A rewrite of Pico CSS v2.1.1 in plain modern CSS.</p>
</details>
<details>
  <summary>Does it need JavaScript?</summary>
  <p>No. Details and summary work in the browser on their own.</p>
</details>

One at a time#

Give several <details> the same name and the browser keeps only one open. This is a native feature, so there is nothing to add on the CSS side. In a browser that ignores name, every section simply opens on its own.

<details name="faq" open>
  <summary>First</summary>
  <p>Opening another one closes this one.</p>
</details>
<details name="faq">
  <summary>Second</summary>
  <p>Only one is open at a time.</p>
</details>
<details name="faq">
  <summary>Third</summary>
  <p>The same goes for this one.</p>
</details>

Animated open and close#

The animation is on by default and needs no markup. It is wrapped in @supports (interpolate-size: allow-keywords) and selector(::details-content) and in prefers-reduced-motion: no-preference, so it is skipped where the browser cannot do it and for people who ask for less motion. The duration comes from --pico-transition. The dropdown (details.dropdown) is left out, because its menu is a floating list and not content that pushes the page down.

Button style summary#

Add role="button" to the <summary> and it looks like a button. Add a class such as secondary, contrast or outline to change the style.

<details>
  <summary role="button" class="secondary">Show more</summary>
  <p>Hidden until you ask for it.</p>
</details>
<details>
  <summary role="button" class="outline">Outline button</summary>
  <p>The same, as an outline.</p>
</details>

Accessibility#

<details> and <summary> are keyboard accessible by default: Tab to the summary, Enter or Space toggles it. The summary shows a focus ring on :focus-visible. The chevron is a background image, so it is not read out. Keep the summary text short and put the detail in the body.

Customization#

--pico-accordion-border-color

var(--pico-muted-border-color)

Border color token, kept from Pico CSS v2.1.1.

--pico-accordion-close-summary-color

var(--pico-color)

Summary text while the section is closed.

--pico-accordion-open-summary-color

var(--pico-color)

Summary text while the section is open.

--pico-accordion-active-summary-color

var(--pico-primary-hover)

Summary text while it has focus.

--pico-icon-chevron

SVG data URI

The chevron image, an SVG data URI.

--pico-transition

150ms cubic-bezier(0.2, 0, 0, 1)

Duration and easing of the chevron and the height animation.

See also the Dropdown, which is a <details> with a floating menu.