0Pricing
HTML Academy · Lesson

Building a PE Accordion

Build an accordion that works without JavaScript, then enhance it.

Goal: A Working Accordion Without JS

The PE version of an accordion uses HTML alone — the native <details>/<summary> element pair. Click summary to toggle the panel. Works with no CSS, no JS, no framework: it is built into HTML.

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the markup language of the web.</p>
</details>

Accessibility Built In

<summary> is a focusable, keyboard-activatable button (Enter/Space toggles). Screen readers announce the expanded/collapsed state. Two HTML elements deliver what a custom React accordion can take dozens of lines of ARIA and event handling to achieve.

All lessons in this course

  1. The PE Philosophy Start with HTML
  2. Feature Detection vs Browser Sniffing
  3. Graceful Degradation vs Progressive Enhancement
  4. Building a PE Accordion
← Back to HTML Academy