Can accordion be fully CSS with radio inputs?

Yes. Hide radios and style labels; details is simpler for FAQs.

Are tabs possible without JS?

Pure CSS radio tabs work; keyboard/a11y needs button tabs + JS.

Multiple open accordions?

details allows many open; for one-open use name attribute (new) or JS.

CSS Accordion & Tabs

1. details / summary accordion

No JS required for simple FAQ sections.

FAQ item

What is included?

All interactive demos and copy-ready code.

Click summary to toggle.

details {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
summary { font-weight: 600; cursor: pointer; }

2. Tab list styling

Horizontal tabs with active underline.

Tabs

General settings panel

Visual tab bar (static demo).

.tablist { display: flex; gap: 0.5rem; border-bottom: 2px solid #e2e8f0; }
.tab[aria-selected="true"] { border-bottom: 2px solid #4f46e5; color: #4f46e5; }

3. Rotating chevron on open

Transform summary marker with details[open].

Chevron

Shipping

Ships in 2–5 business days.

Chevron rotates when open.

details[open] summary .chevron { transform: rotate(180deg); }

Frequently asked questions

Can accordion be fully CSS with radio inputs?: Yes. Hide radios and style labels; details is simpler for FAQs.
Are tabs possible without JS?: Pure CSS radio tabs work; keyboard/a11y needs button tabs + JS.
Multiple open accordions?: details allows many open; for one-open use name attribute (new) or JS.