The Old NetISSUE #57 of 60

accordion · tabs · the classic widgets

Pixel PeteVSQuirks Mode

Pixel Pete saysAccordions and tabs show one panel at a time by toggling classes on click.

Two evergreen widgets. An accordion expands one section while collapsing others; tabs swap panels under a row of buttons. Both are the same idea: click a header, mark it active, hide the other panels. HTML's <details>/<summary> gives native accordions for free; tabs still need a little script plus ARIA roles for accessibility.

Power-ups you unlock

Accordion: expand one, collapse the rest
Tabs: swap panels under a button row
Same logic: mark active, hide others
<details>/<summary> = native accordion

Quirks Mode attacks — common mistakes

Forgetting ARIA roles/states for accessibility
Showing multiple panels when one was intended
Rebuilding accordions instead of using <details>

Boss battleBuild a 3-tab switcher that shows one panel at a time.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><details><summary style="cursor:pointer;color:#b388ff">native accordion</summary><p>no JS needed.</p></details></body></html>

▶ Open the interactive comic issue

‹ Modal Patterns · Overlays · Centering Ajax · The Leap To Fetching Without Reload ›