details and summary: an FAQ accordion
Same name, so opening the second closed the first. The toggle event arrives a moment later (it is queued, not fired instantly). Click the summaries yourself too.
details/summary give you an open-and-close section, dialog gives you a real popup window, and the popover attribute makes menus and tips that appear on top; all with keyboard support and accessibility built in, often with no JavaScript.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a two-question FAQ where only one answer can be open at a time and the first is open at the start.
Build a "Subscribe?" modal with Yes/No buttons that logs the choice when it closes. Open it from a button.
Make a button that toggles a small help popover with the text "Passwords need 12 characters".
Explain it without notes
What does showModal() give you that show() doesn't?
How does <form method="dialog"> work?
What is light dismiss, and which kind of popover has it?
Why are native details, dialog and popover better than hand-built div widgets?
Preview
Console
Nothing logged yet.Expected console output
Start: true false
After opening the second: false true
toggle event, second is open: true