Accordion Pattern

Implementation: Native (Easiest)

Native HTML5 provides an accessible accordion out of the box.

<details>
  <summary>What is WCAG?</summary>
  <p>WCAG stands for Web Content Accessibility Guidelines...</p>
</details>

Pros: No JS needed. Accessible by default. Cons: Styling limitations in older browsers (though widely supported now).

Implementation: Custom (ARIA)

If you need complex animations or logic.

<h3>
  <button 
    aria-expanded="false" 
    aria-controls="sect1" 
    id="accordion1"
    onclick="toggleAccordion(this)"
  >
    What is WCAG?
  </button>
</h3>
<div id="sect1" role="region" aria-labelledby="accordion1" hidden>
  <p>...</p>
</div>

Script Logic:

• Toggle aria-expanded between true and false.
• Remove hidden attribute (or set display) on the panel.