How to make expandable sections

Use the native disclosure

The browser provides mouse, touch, and keyboard behavior without JavaScript.

<details>
  <summary>What does the course cost?</summary>
  <p>The complete course is free.</p>
</details>

Open it initially

Add the Boolean open attribute when the content should start expanded.

<details open>
  <summary>System requirements</summary>
  <p>You need a text editor and a modern browser.</p>
</details>

Write a clear summary

The summary is the control's accessible name. Make it a short label or question that accurately predicts the hidden content.

Use it appropriately

Disclosures are useful for optional details and FAQs. Do not hide critical warnings, form errors, or required instructions. Test custom marker styling with keyboard navigation and high-contrast settings.