accordion.md

Accordion

Simple accordion

<details>
  This is a simple details content
</details>

Accordion with custom summary

<details>
  <summary>View all details</summary>
  This is a details content with custom summary
</details>

Pre-opened accordion

<details open>
  This is a simple details content
</details>

Group of accordions mutually exclusive

<details name="refrigerator">
  <summary>Refrigerator 1</summary>
  Lunches, condiments, yogurt et al.
</details>

<details name="refrigerator">
  <summary>Refrigerator 2</summary>
  More Lunches, leftovers from client meeting, stray cans of off-brand soda et
  al.
</details>

<details name="refrigerator">
  <summary>Refrigerator 3</summary>
  Cookie dough someone bought from somebody’s child’s fundraiser, expired milk,
  unidentifiable meat et al.
</details>

---

• Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion
• MDN: <details>
• MDN: <summary>
• Can I Use #details
• Lesser Known Uses Of Better Known Attributes