# Details and Summary: Show and Hide The details and summary elements make a section that opens and closes when it's clicked, such as an FAQ answer or a quiz answer, with no JavaScript and with keyboard support built in. Apprentice · HTML · Updated October 31, 2026 ## After this lesson you can - Build a section that opens and closes with details, summary and the open attribute - Group details elements with name so only one opens at a time ## Key takeaways - A `
` element is closed until the visitor clicks its ``, the label that always shows. The summary goes first inside it. - The browser opens and closes it with a click, a tap, or Enter and Space on the keyboard, and screen readers say whether it's open. - The `open` attribute makes a `
` start open, and the browser adds or removes it as the visitor opens and closes the section. - Give several `
` the same `name`, and opening one closes the others: one open at a time. Think of the last FAQ page you scrolled through: a list of questions, and you clicked the one you cared about to see its answer. Or a quiz app that hides the answer until you tap "Show answer", a store page with "Shipping and returns" folded away, a recipe with its tips tucked under "Cook's notes". All of those are one idea: a section that opens and closes. For years that took JavaScript. Today it takes two HTML elements, `
` and ``, and the browser does the clicking, the keyboard and the screen reader for you. You'll use them on FAQ pages, quiz and flash-card pages, help pages, and anywhere a page has more than most visitors need at once. ## A box with a label: \`<details>\` and \`<summary>\` Picture a gift box with a tag tied on. You can read the tag without opening anything, and you open the box only if you want what's inside. - **`
`** (read "details") is the box. Everything inside it is hidden until it's opened. - **``** (read "summary") is the tag: the label that always shows. It goes **first** inside the `
`. ```html
Science round, question 1: Which planet is known as the Red Planet?

Mars. Its dust is full of iron oxide: rust.

``` The browser shows the question with a small triangle in front of it, pointing right (▶). Click the question and the answer appears under it, and the triangle turns to point down (▼). Click again and the answer folds away. In your textbook, or on MDN, this is called a **disclosure widget**: a control that shows and hides content. ![Two copies of the same trivia question: the first closed, showing only the question with a triangle pointing right; the second open, with the triangle pointing down and the answer Mars shown under the question](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/7b25b5ada52f459daaa1fce4cc2e363f.webp) **Try it.** In your `trivia-night` page, add three trivia questions, each in its own `
` with the question in the `` and the answer in a `

` under it. Open the page with Live Server and click each one. ## It works with the keyboard for free Not everyone uses a mouse. Some people move around a page with the keyboard, and some use a **screen reader**, a program that reads the page aloud. A `

` element works for all of them with nothing added: - **Tab** moves to the next summary on the page. - **Enter** or **Space** opens or closes the one you're on. - A screen reader announces the summary as a button and says whether it's expanded or collapsed. To build the same thing out of `
`s, you would need JavaScript for the click, more for the keyboard, and extra attributes so a screen reader knows what's going on. Most homemade versions miss at least one of those. The built-in one doesn't. **Try it.** Click in the address bar of your page, then press **Tab** until a question is outlined, and open it with **Enter**. Press **Tab** again to move to the next question. ## Starting open: the \`open\` attribute A `
` starts closed. To have one start open, such as the most popular question on an FAQ page, add the **`open`** attribute. It's a boolean attribute, like the ones in *Attributes*: it needs no value, because being there is what counts. ```html
When is trivia night?

Every Thursday at

``` The browser keeps `open` up to date as the visitor clicks: it adds the attribute when the section opens and removes it when it closes. You can watch that happen. **Try it.** Add `open` to one of your questions. Then right-click the page, choose **Inspect**, find that `
` in the Elements panel, and click its summary on the page a few times. The `open` attribute disappears and comes back. ## One open at a time: the \`name\` attribute On a page with ten questions, a visitor who opens them all ends up with a long, messy page. Often you want one open at a time: open question 2 and question 1 folds itself away. This pattern is called an **accordion**, after the instrument that folds open and shut, and the one-at-a-time kind is an **exclusive accordion**. Give every `
` in the group the same **`name`** value: ```html
Question 1: Which planet is known as the Red Planet?

Mars.

Question 2: What gas do plants take in from the air?

Carbon dioxide.

Question 3: How many bones are in an adult human body?

206.

``` Open question 2 and whichever one was open closes. A `
` with a different `name`, or none, isn't part of the group, so a page can have a group per round. If you put `open` on two members of a group, only the first one starts open. Every major browser has supported `name` on `
` since September 2024. In a browser older than that, each question opens and closes on its own, so nothing breaks; the page only loses the one-at-a-time tidying. ## What belongs inside, and what doesn't Hide what most visitors can skip: answers, long explanations, the fine print. Don't hide what everyone needs, such as the date, the address or the price: a visitor who doesn't think to click never sees it. Inside a `
` you can put almost anything that goes on a page: paragraphs, lists, pictures, even a table. Keep the summary short, though: it's a label, and someone using a screen reader hears all of it each time they reach it. ## Check yourself 2 questions to try on the lesson page. ## So what Two elements give you a section that opens and closes, works with a mouse, a finger and a keyboard, and tells a screen reader what it is, with no JavaScript to write or fix. Reach for them before you build one yourself. ## Key terms - [<details>](https://www.ask-codey.com/glossary/details) - [<summary>](https://www.ask-codey.com/glossary/summary) - [open attribute](https://www.ask-codey.com/glossary/open-attribute) ## Cheat sheets - [Details and Summary: Show and Hide](https://www.ask-codey.com/cheat-sheets/html-details-and-summary-cheat-sheet) ## Related - [Quotes, Dates, Code and More](https://www.ask-codey.com/lessons/html-quotes-dates-code-and-more) Source: https://www.ask-codey.com/lessons/html-details-and-summary