An accordion and a template – HTML Practice Problem

Build a help page with no JavaScript in your HTML.

What to build

An accordion, a dialog and a template.

Requirements

Three details elements with name="faq" and summaries Shipping, Returns and Payment, each with a paragraph.
The first starts open.
A dialog with id="contact", containing a form with method="dialog" and a button reading Close.
A template with id="row", containing one li with the class result.

Constraints

Nothing from the template may be displayed.

Example

<details name="faq" open> starts open, and closes when another in the group opens.

Why it works

Sharing the name gives the accordion behaviour for free. The dialog closes without a script, and a template holds markup that scripts can copy later.

Hints

Hint 1

details elements with the same name act as an accordion.

Hint 2

The dialog needs a form with method="dialog".

Hint 3

A template stays hidden, so it can hold a repeated row.

Solution

Show one correct solution (try it yourself first)

<h1>Help</h1>
<details name="faq" open><summary>Shipping</summary><p>Two days.</p></details>
<details name="faq"><summary>Returns</summary><p>Within 7 days.</p></details>
<details name="faq"><summary>Payment</summary><p>Card or cash.</p></details>
<dialog id="contact">
  <form method="dialog"><button>Close</button></form>
</dialog>
<template id="row"><li class="result"></li></template>

Lesson: Built-in interactive elements →