A collapsible answer

Make an FAQ item that opens and closes.

What to build

One collapsible question.

Requirements

  • A details element containing a summary reading Is it free?.
  • A paragraph after the summary, reading Yes, every lesson is free.

Constraints

Do not use a script.

Example

The syntax part of the lesson has the same shape.

Why it works

The browser provides the show and hide behaviour, including keyboard support.

Hints

Hint 1

summary goes first, inside details.

Solution

Show one correct solution (try it yourself first)
<details>
  <summary>Is it free?</summary>
  <p>Yes, every lesson is free.</p>
</details>

Lesson: Built-in interactive elements →