Accordion: details and summary
An accordion is a list of blocks that show only a heading, with the content revealed on click. It saves space in sections like "Questions and answers". HTML has a tag pair for this, <details> and <summary>: the browser opens and closes the block itself, without JavaScript. Pico adds an arrow and spacing.
One collapsible block
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<details>
<summary>How much does a landing page cost?</summary>
<p>From $600 depending on the number of sections and animations.</p>
</details>The preview shows the question line with an arrow on the right. Click it — the arrow turns and the answer appears below the question. <summary> is always the first child of <details>; everything else is the hidden content.
An accordion of several items
Several <details> blocks go one after another, separated by an <hr> line. The open attribute expands a block on load, and a shared name attribute links items: opening one closes the others.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<h3>Questions and answers</h3>
<details name="faq" open>
<summary>How much does a landing page cost?</summary>
<p>From $600 depending on the number of sections.</p>
</details>
<hr>
<details name="faq">
<summary>How long does the work take?</summary>
<p>Usually two weeks from prototype to launch.</p>
</details>
<hr>
<details name="faq">
<summary>Do you build CMS websites?</summary>
<p>Yes, with WordPress and static site generators.</p>
</details>The first answer is open right away. Open the second — the first closes by itself. All modern browsers support the name attribute on <details>; in an old browser the items simply open independently.
| Attribute | What it does |
|---|---|
open | The block is expanded on load |
name="faq" | Only one block with this name is open at a time |
A heading styled as a button
Put role="button" on <summary> and the heading becomes a button with an arrow. The variant classes from the buttons lesson work too:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<details>
<summary role="button" class="outline">Show skills</summary>
<ul>
<li>HTML and CSS</li>
<li>Responsive layout</li>
<li>Accessibility</li>
</ul>
</details>An outlined button reveals the list of skills. This look helps when there is a single block that must be noticed.
Common mistake
Putting an <h3> heading or a link inside <summary>. A link inside catches the click and the block stops opening, while a heading breaks the arrow alignment. Keep <summary> to short text and place headings and links in the collapsible part.