Project 11: FAQ Accordion

HTML Masterclass

Builds on these lessons

Dialog Element Popover Api Details Summary Advanced Inert Attribute Template Element Slot Element Search Element

Step 1 of 5

Project

FAQ Items with details & summary

Build the accordion itself: an <h1>, then three <details><summary>Question</summary><p>Answer</p></details> blocks. Each one expands and collapses natively — this is the whole accordion, with zero JavaScript.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frequently Asked Questions</title>
</head>
<body>
  <h1>Frequently Asked Questions</h1>
  <details>
    <summary>How long does shipping take?</summary>
    <p>Orders ship within 2 business days and arrive in 5-7 days domestically.</p>
  </details>
  <details>
    <summary>What's your return policy?</summary>
    <p>Returns are accepted within 30 days of delivery, unworn and with tags attached.</p>
  </details>
  <details>
    <summary>Do you ship internationally?</summary>
    <p>Yes, to over 40 countries. Customs fees are the buyer's responsibility.</p>
  </details>
</body>
</html>

← Previous Next →