Open demo

CSS code

HTML 
<div><span class="lbl">Exclusive accordion</span>
<p class="note">Giving several <code><details></code> the same <code>name</code> makes them behave as a group: opening one closes the rest. This is a native HTML feature and needs no script.</p>
<div class="acc">
<details name="faq" open>
<summary>What is included in the download?<span class="chev" aria-hidden="true"></span></summary>
<div class="body">Each set comes as plain CSS, Bootstrap 5 and Tailwind CSS versions of the same design, one HTML file each. There is no build step and nothing to compile.</div>
</details>
<details name="faq">
<summary>Can I use these commercially?<span class="chev" aria-hidden="true"></span></summary>
<div class="body">Yes — free for personal and commercial projects, including client work.</div>
</details>
<details name="faq">
<summary>Do they work on mobile?<span class="chev" aria-hidden="true"></span></summary>
<div class="body">Yes. The header row is a flex layout, and the tap target is the full width of the row rather than just the label text.</div>
</details>
</div>
</div>
<div><span class="lbl">Independent, for comparison</span>
<div class="acc">
<details>
<summary>What is included in the download?<span class="chev" aria-hidden="true"></span></summary>
<div class="body">Each set comes as plain CSS, Bootstrap 5 and Tailwind CSS versions of the same design, one HTML file each. There is no build step and nothing to compile.</div>
</details>
<details>
<summary>Can I use these commercially?<span class="chev" aria-hidden="true"></span></summary>
<div class="body">Yes — free for personal and commercial projects, including client work.</div>
</details>
<details>
<summary>Do they work on mobile?<span class="chev" aria-hidden="true"></span></summary>
<div class="body">Yes. The header row is a flex layout, and the tap target is the full width of the row rather than just the label text.</div>
</details>
</div>
</div>
CSS 
/* Exclusive accordion: <details> elements that share a name attribute open one at a time, natively. */
.acc{--acc-bg:#fff;--acc-border:#e2e8f0;--acc-text:#1e293b;--acc-muted:#475569;
  --acc-hover:#f8fafc;--acc-icon:#64748b;--acc-focus:#2563eb;max-width:560px}
.acc details{background:var(--acc-bg);border:1px solid var(--acc-border);border-radius:11px;margin:0 0 9px;overflow:hidden}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;cursor:pointer;
  list-style:none;font-size:.94rem;font-weight:600;color:var(--acc-text);transition:background-color .15s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--acc-hover)}
.acc summary:focus-visible{outline:2px solid var(--acc-focus);outline-offset:-2px}
.acc .body{padding:0 18px 17px;font-size:.89rem;line-height:1.66;color:var(--acc-muted)}
/* chevron: two borders of a small square, rotated to point down, then up when open */
.acc .chev{flex:none;width:9px;height:9px;margin-top:-3px;border-right:2px solid var(--acc-icon);
  border-bottom:2px solid var(--acc-icon);transform:rotate(45deg);transition:transform .2s}
.acc details[open]>summary .chev{margin-top:3px;transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.acc summary,.acc .chev{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<div><span class="lbl">Exclusive accordion</span>
<p class="note">Giving each panel the same <code>data-bs-parent</code> makes them behave as a group: opening one closes the rest. The Collapse plugin handles it.</p>
<div class="accordion acc" id="faq-exclusive">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b4-1" aria-expanded="true" aria-controls="b4-1">What is included in the download?</button></h3>
<div id="b4-1" class="accordion-collapse collapse show" data-bs-parent="#faq-exclusive">
<div class="accordion-body">Each set comes as plain CSS, Bootstrap 5 and Tailwind CSS versions of the same design, one HTML file each. There is no build step and nothing to compile.</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#b4-2" aria-expanded="false" aria-controls="b4-2">Can I use these commercially?</button></h3>
<div id="b4-2" class="accordion-collapse collapse" data-bs-parent="#faq-exclusive">
<div class="accordion-body">Yes — free for personal and commercial projects, including client work.</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#b4-3" aria-expanded="false" aria-controls="b4-3">Do they work on mobile?</button></h3>
<div id="b4-3" class="accordion-collapse collapse" data-bs-parent="#faq-exclusive">
<div class="accordion-body">Yes. The header row is a flex layout, and the tap target is the full width of the row rather than just the label text.</div>
</div>
</div>
</div>
</div>
<div><span class="lbl">Independent, for comparison</span>
<div class="accordion acc">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#b4-4" aria-expanded="false" aria-controls="b4-4">What is included in the download?</button></h3>
<div id="b4-4" class="accordion-collapse collapse">
<div class="accordion-body">Each set comes as plain CSS, Bootstrap 5 and Tailwind CSS versions of the same design, one HTML file each. There is no build step and nothing to compile.</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#b4-5" aria-expanded="false" aria-controls="b4-5">Can I use these commercially?</button></h3>
<div id="b4-5" class="accordion-collapse collapse">
<div class="accordion-body">Yes — free for personal and commercial projects, including client work.</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#b4-6" aria-expanded="false" aria-controls="b4-6">Do they work on mobile?</button></h3>
<div id="b4-6" class="accordion-collapse collapse">
<div class="accordion-body">Yes. The header row is a flex layout, and the tap target is the full width of the row rather than just the label text.</div>
</div>
</div>
</div>
</div>
CSS 
/* Bootstrap .accordion + Collapse plugin. data-bs-parent makes the first group exclusive. */
.acc{--bs-accordion-color:#475569;--bs-accordion-bg:#fff;--bs-accordion-border-color:#e2e8f0;
  --bs-accordion-border-radius:11px;--bs-accordion-inner-border-radius:10px;
  --bs-accordion-btn-padding-x:18px;--bs-accordion-btn-padding-y:15px;--bs-accordion-btn-color:#1e293b;
  --bs-accordion-btn-bg:transparent;--bs-accordion-active-color:#1e293b;--bs-accordion-active-bg:transparent;
  --bs-accordion-btn-focus-box-shadow:none;--bs-accordion-btn-icon-width:16px;--bs-accordion-btn-icon-transition:transform .2s;
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-width='2' d='M2.5 5 8 10.5 13.5 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon:var(--bs-accordion-btn-icon);
  --bs-accordion-body-padding-x:18px;--bs-accordion-body-padding-y:17px;
  --acc-hover:#f8fafc;--acc-focus:#2563eb;max-width:560px}
/* separate cards instead of one joined block */
.acc .accordion-item{margin-bottom:9px;border-top:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
  border-radius:var(--bs-accordion-border-radius);overflow:hidden}
.acc .accordion-button{justify-content:space-between;gap:14px;font-size:.94rem;font-weight:600;line-height:normal;
  box-shadow:none;transition:background-color .15s}
.acc .accordion-button::after{margin-left:0}
.acc .accordion-button:hover{background-color:var(--acc-hover)}
.acc .accordion-button:focus-visible{outline:2px solid var(--acc-focus);outline-offset:-2px}
.acc .accordion-body{padding-top:0;font-size:.89rem;line-height:1.66}
@media (prefers-reduced-motion:reduce){.acc .accordion-button,.acc .accordion-button::after,.acc .collapsing{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Exclusive accordion</span>
<p class="mb-5 max-w-[560px] rounded-[10px] border border-[#bfdbfe] bg-[#eff6ff] px-[17px] py-[14px] text-[.85rem] leading-[1.6] text-[#1e40af]">Giving several <code class="rounded bg-[#dbeafe] px-[5px] py-px text-[.8rem]"><details></code> the same <code class="rounded bg-[#dbeafe] px-[5px] py-px text-[.8rem]">name</code> makes them behave as a group: opening one closes the rest. This is a native HTML feature and needs no script.</p>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" name="faq" open>
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] px-[18px] py-[15px] text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">What is included in the download?<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Each set comes as plain CSS, Bootstrap 5 and Tailwind CSS versions of the same design, one HTML file each. There is no build step and nothing to compile.</div>
</details>
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" name="faq">
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] px-[18px] py-[15px] text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Can I use these commercially?<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Yes — free for personal and commercial projects, including client work.</div>
</details>
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" name="faq">
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] px-[18px] py-[15px] text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Do they work on mobile?<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Yes. The header row is a flex layout, and the tap target is the full width of the row rather than just the label text.</div>
</details>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Independent, for comparison</span>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white">
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] px-[18px] py-[15px] text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">What is included in the download?<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Each set comes as plain CSS, Bootstrap 5 and Tailwind CSS versions of the same design, one HTML file each. There is no build step and nothing to compile.</div>
</details>
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white">
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] px-[18px] py-[15px] text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Can I use these commercially?<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Yes — free for personal and commercial projects, including client work.</div>
</details>
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white">
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] px-[18px] py-[15px] text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Do they work on mobile?<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Yes. The header row is a flex layout, and the tap target is the full width of the row rather than just the label text.</div>
</details>
</div>
</div>

About this set

An accordion where opening one panel closes the others, shown next to an independent accordion so the difference is easy to try. In the plain CSS and Tailwind versions the grouping is done by HTML alone: every details element in the group carries the same name attribute, and the browser keeps at most one of them open. There is no script, no radio-button workaround and no state to manage, and the panels still work with the keyboard. In browsers that do not yet support the name attribute on details, the panels simply open independently, so nothing breaks. The Bootstrap version gets the same behaviour from the Collapse plugin by giving each panel data-bs-parent pointing at the accordion’s id; leave the attribute out and the panels open independently, as in the second example. Use an exclusive accordion when answers are long and only one needs to be on screen at a time, such as a pricing FAQ or a mobile menu, and an independent one when readers may want to compare answers.

What’s included

  • Exclusive group through the native name attribute on details, no JavaScript
  • Bootstrap version uses data-bs-parent with the Collapse plugin
  • Independent accordion alongside for comparison
  • Falls back to independent panels in older browsers
  • Chevron transition switches off under reduced motion

Accessibility

Headers are summary elements, or buttons with aria-expanded and aria-controls in the Bootstrap version, so each panel's state is announced when it changes. Tab moves between headers and Enter or Space toggles them; closing the other panels happens automatically. Focus shows a 2px blue outline, and the chevron transition is removed under prefers-reduced-motion.

Customise it

Change the name value to create separate groups on one page, and the --acc-* properties on .acc for colours. In Bootstrap change the id and matching data-bs-parent values and the --bs-accordion-* variables; in Tailwind edit the colour classes on details and summary.