Building a PE Accordion
Build an accordion that works without JavaScript, then enhance it.
Building a PE Accordion is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Layering CSS
Style the disclosure triangle, panel padding, and transitions with regular CSS. The open attribute reflects state, so details[open] summary { color: blue; } applies only when expanded. No JS needed for visual polish.
details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }Animating Open and Close
The default open/close is instant. Animate by transitioning content-visibility or by JS that measures the panel height and animates max-height. For simple cases the abrupt toggle is acceptable; animation is a CSS+JS enhancement applied progressively.
Enhancing With JavaScript
JS can add nice-to-haves: close other accordions when one opens (single-open mode), persist open state in localStorage, animate the transition, or analytics-track which entries are expanded. Each enhancement is purely additive.
document.querySelectorAll("details").forEach((d) => {
d.addEventListener("toggle", () => {
if (d.open) {
document.querySelectorAll("details").forEach((o) => {
if (o !== d) o.removeAttribute("open");
});
}
});
});The toggle Event
<details> fires a toggle event whenever its open state changes. Use it to react to user expansion without re-wiring click handlers. Compatible with both mouse clicks and keyboard activation.
Server-Rendering State
To render an initially open accordion, set the open attribute server-side: <details open>. State is in the HTML, accessible to crawlers and to users on slow connections, before any JS executes.
When the Built-in is Not Enough
If the design requires a custom expand/collapse icon, animated reveal, or multi-column panel, build a custom version — but use <details>/<summary> as the underlying structure if possible. Add ARIA only if you cannot use the native elements at all.
No-JS Verification
Disable JavaScript in DevTools and verify the accordion still works: click summary, panel toggles, focus order remains logical, keyboard activates. If anything breaks, the JS is not an enhancement — it is a requirement, which violates PE.
CSS-Only Single-Open
For radio-style "only one open at a time" without JS, use the name attribute on <details> (supported in Chrome/Safari): all <details name="faq"> share state so opening one closes others. A pure-HTML pattern that mirrors radio buttons.
Migrating From a JS-Only Accordion
Replace divs+JS with <details>/<summary>, preserve CSS classes for styling. The result is shorter HTML, no JS dependency, better accessibility, and indexable content. Most JS accordions can be migrated to PE with minimal user-visible change.
Knowledge Check
What HTML element pair provides a fully working accordion without any JavaScript?
Summary
A PE accordion uses native <details>/<summary> for the baseline — fully accessible and keyboard-driven without JS. Layer CSS for visual styling, optionally JS for animations or single-open behavior. Verify by disabling JS that the baseline still works. The new name attribute even enables CSS-only single-open mode.
Frequently asked questions
Is the “Building a PE Accordion” lesson free?
Yes — the full text of “Building a PE Accordion” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Building a PE Accordion”?
Build an accordion that works without JavaScript, then enhance it. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Building a PE Accordion” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.