Challenge · hard
HTML Accordion Without JavaScript: details, summary
Goal: Turn a long FAQ into a details and summary accordion that works without any JavaScript.
Learn
An accordion lists the questions and keeps each answer hidden until someone clicks. HTML ships with one. Every <details> element holds a single question and its answer. The first child, <summary>, is the question you click, and whatever follows it is the answer. The details section of the HTML standard (opens in a new tab) describes how it behaves.
Mouse users, keyboard users (Tab to focus, Enter or Space to toggle) and screen reader users all get a working widget without a line of script. That already covers most of the WAI-ARIA accordion pattern (opens in a new tab). Put open on one item to show it on load. If every item shares the same name, opening one closes the rest.
An answer can hold paragraphs, lists, links, anything. Every attribute is listed on the reference pages for details and summary.
The short version
- Each question and answer becomes a
<details>whose first child is a<summary>. - The boolean
openattribute shows an item when the page loads. - Give every item the same
nameand only one can be open. - An answer can contain anything, lists and
mailto:links included.
Example
<details name="shop" open>
<summary>Do you ship abroad?</summary>
<p>Yes, to 30 countries.</p>
</details>
<details name="shop">
<summary>Can I return an item?</summary>
<p>Within 30 days.</p>
</details>Your task
Rebuild this FAQ as an accordion:
- Put the whole page inside
<main>. The one<h1>and the<h2>stay. - Give each of the 4 questions its own
<details>. The question text goes in a<summary>, which must be the first child, and ends with a question mark. - Delete the
<h3>headings that sit loose on the page. - Add
name="faq"to all 4 details and open exactly one of them by default. - Leave the answers as paragraphs (3 or more), except the browser answer, which becomes a list of 4 items.
- Turn the support address into a
mailto:link.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Frequently asked questions
How do I make an accordion in HTML without JavaScript?
Write one <details> element for each panel of the accordion (opens in a new tab). The first child, <summary>, is the heading people click. Everything after it stays hidden until the panel opens. Put open on a panel to show it on load. Give all the panels one shared name and opening one closes the others. The browser handles keyboard and screen reader support for you.
Is text inside a closed details element bad for SEO?
No. The answer sits in the HTML, so search engines read it whether the panel is open or closed, and Google has said it indexes content in expandable sections as usual. Many browsers also pop a closed <details> open when a find-in-page search matches its text, so Ctrl+F still works for visitors. See the HTML SEO guide for what else search engines read.