6 Pure CSS2 with JSPublished 2026-10-04Free · no sign-up
Eight accordions for FAQs, product details and navigation: a native details accordion, a one-at-a-time group with the name attribute, smooth height animation, the ARIA button pattern, numbered FAQ cards, horizontal gallery panels, a nested docs menu and Expand all controls.
An accordion built from details and summary elements, so expanding, collapsing and keyboard support come from the browser. The default marker is replaced by a rotating plus sign, and each summary is a heading-sized label for easy scanning.
View code
<div class="acc">
<details open><summary>How long does delivery take?</summary><p>Standard delivery takes 3 to 5 working days. Express arrives the next working day if you order before 2 pm.</p></details>
<details><summary>Can I return an item?</summary><p>Yes, within 30 days if it is unused and in its original packaging.</p></details>
<details><summary>Do you ship abroad?</summary><p>We ship to 24 countries. Duties are shown at checkout.</p></details>
</div>
Only one panel open at a time, with no JavaScript: details elements that share the same name attribute behave like a group, so opening one closes the others. Older browsers simply allow several open at once, which is a safe fallback.
View code
<div class="ex">
<details name="faq" open><summary>What is included in the plan?</summary><p>Unlimited products, a custom domain and email support.</p></details>
<details name="faq"><summary>Can I cancel any time?</summary><p>Yes. You keep access until the end of the billing period.</p></details>
<details name="faq"><summary>Is there a free trial?</summary><p>Fourteen days, no card needed.</p></details>
</div>
Panels that open with a smooth height animation, made possible by interpolate-size: allow-keywords and the ::details-content pseudo-element, which let CSS animate to height: auto. Browsers without support open the panel instantly instead.
View code
<div class="an">
<details><summary>Shipping and returns</summary><div class="c"><p>Free shipping over $60. Returns are free within 30 days, and we email a prepaid label.</p></div></details>
<details><summary>Materials</summary><div class="c"><p>Organic cotton canvas with leather handles from a certified tannery.</p></div></details>
</div>
The classic ARIA accordion pattern for when you need full control: each header is a heading containing a button with aria-expanded and aria-controls, and each panel is a region labelled by its button. The script only toggles attributes and hidden.
View code
<div class="aa">
<h3><button aria-expanded="true" aria-controls="aa1" id="ab1">Account</button></h3>
<div id="aa1" role="region" aria-labelledby="ab1"><p>Change your email, password and two-step sign-in.</p></div>
<h3><button aria-expanded="false" aria-controls="aa2" id="ab2">Billing</button></h3>
<div id="aa2" role="region" aria-labelledby="ab2" hidden><p>Update your card and download invoices.</p></div>
<h3><button aria-expanded="false" aria-controls="aa3" id="ab3">Notifications</button></h3>
<div id="aa3" role="region" aria-labelledby="ab3" hidden><p>Choose which emails and alerts you receive.</p></div>
</div>
FAQ items as separate rounded cards with a numbered badge, the style often used on landing pages. The open card gains a tinted background and a shadow, which makes the active question easy to spot when scrolling a long list.
View code
<div class="cq">
<details open><summary><span>01</span>Do I need coding skills?</summary><p>No. Templates come ready to edit with a visual editor, and every block has sensible defaults.</p></details>
<details><summary><span>02</span>Can I use my own domain?</summary><p>Yes, on every paid plan. We walk you through the DNS settings.</p></details>
<details><summary><span>03</span>How do refunds work?</summary><p>Ask within 14 days for a full refund, no questions asked.</p></details>
</div>
Panels laid out side by side that widen when chosen, a gallery-style accordion. Each panel is a radio-backed label, so only one is wide at a time and arrow keys move between them, with the grow effect made by changing flex-grow.
View code
<fieldset class="hz">
<legend class="sr">Destinations</legend>
<label style="--c:#0ea5e9"><input type="radio" name="hz" checked><b>Coast</b><span>Cliff walks and quiet coves.</span></label>
<label style="--c:#22c55e"><input type="radio" name="hz"><b>Forest</b><span>Cabins under old oaks.</span></label>
<label style="--c:#f59e0b"><input type="radio" name="hz"><b>Desert</b><span>Clear skies, cold nights.</span></label>
<label style="--c:#a855f7"><input type="radio" name="hz"><b>City</b><span>Galleries and late dinners.</span></label>
</fieldset>
A documentation sidebar with sections that expand to show pages, and a sub-section nested inside. Nested details elements create the tree without JavaScript, indentation shows the depth, and the current page is marked with aria-current.
A long policy page benefits from Expand all and Collapse all controls. The buttons set the open property on every details element, the button label switches to match, and each item still works on its own for people who want just one answer.
View code
<div class="ea">
<button id="ea-t" aria-controls="ea-l">Expand all</button>
<div id="ea-l">
<details><summary>Data we collect</summary><p>Your name, email and order history, only to run your account.</p></details>
<details><summary>How long we keep it</summary><p>For as long as your account is open, then 12 months for tax records.</p></details>
<details><summary>Your rights</summary><p>You can download or delete your data from account settings.</p></details>
</div>
</div>
<details> and <summary> give you expand and collapse, keyboard support and screen reader announcements with no JavaScript. Replace the default triangle by hiding ::-webkit-details-marker and adding your own icon.
One open at a time
Give several details elements the same name attribute and the browser closes the others when one opens. Older browsers ignore it and allow several open, which is a harmless fallback.
Animating to auto height
interpolate-size: allow-keywords together with the ::details-content pseudo-element lets CSS animate a panel to height: auto. Where unsupported, panels open instantly.
FAQ structured data
If an accordion holds genuine questions and answers, you can describe them with FAQPage structured data. Search engines now show FAQ rich results only for some sites, so treat it as context, not a guaranteed result.
Frequently asked questions
Should I use details or ARIA buttons?
Use details for most content. Use the ARIA button pattern when you need custom behaviour or headings around the buttons.
Is content in a closed accordion indexed?
Search engines can read text in closed details elements, though visible text is generally safest for key information.
Which demos need JavaScript?
The ARIA accordion and the Expand all demo. The rest are HTML and CSS.