How to Create a CSS-Only Accordion (No JavaScript)

HTML details/summary Foundation

An accordion is a collapsible section list. HTML details and summary elements provide this natively: the browser handles open/close state, keyboard navigation, and screen reader semantics without JavaScript. Wrap each section in details, put the header in summary, and remaining content becomes the collapsible body. Add the open attribute for initially expanded sections. Semantically correct, progressively enhanced, and accessible by default.

Styling the Accordion

Style summary: remove default triangle with summary { list-style: none; } and summary::-webkit-details-marker { display: none; }. Add custom indicator (plus/minus or chevron) that rotates when open: details[open] summary .icon { transform: rotate(45deg); }. Style content with padding, borders, backgrounds. Standard CSS layout works naturally inside details elements.

Adding Smooth Animations

Smooth transitions are the trickiest part. The modern approach uses the CSS grid trick: set content wrapper to display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s; and switch to 1fr when open. Chrome 129+ supports interpolate-size: allow-keywords for height: auto transitions. Use the CSS Animation Generator to fine-tune easing curves.

Accessibility Best Practices

Native details/summary is already accessible — keyboard-navigable (Enter/Space to toggle, Tab between sections), announces state to screen readers. To enhance: ensure color contrast on summary text, make click targets at least 44×44px for touch, keep indicators visible. For single-open behavior, the name attribute on details elements creates exclusive groups (Chrome 120+, Safari 17.2+).