Open demo

CSS code

HTML 
<div><span class="lbl">Rotating chevron</span>
<div class="acc">
<details 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>
<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>
<div><span class="lbl">Plus to minus</span>
<div class="acc">
<details open>
<summary>What is included in the download?<span class="pm" 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="pm" 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="pm" 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">Toggle switch</span>
<div class="acc">
<details open>
<summary>What is included in the download?<span class="knob" 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="knob" 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="knob" 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">Numbered</span>
<div class="acc acc-num">
<details open>
<summary><span class="idx" aria-hidden="true">1</span>What is included in the download?</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><span class="idx" aria-hidden="true">2</span>Can I use these commercially?</summary>
<div class="body">Yes — free for personal and commercial projects, including client work.</div>
</details>
<details>
<summary><span class="idx" aria-hidden="true">3</span>Do they work on mobile?</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 
/* Native <details>/<summary>; four markers that show the open state. */
.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)}
/* plus that becomes a minus: the vertical bar turns flat and fades */
.acc .pm{position:relative;flex:none;width:15px;height:15px}
.acc .pm::before,.acc .pm::after{content:"";position:absolute;background:var(--acc-icon);border-radius:2px;
  transition:transform .2s,opacity .2s}
.acc .pm::before{top:6px;left:0;width:15px;height:3px}
.acc .pm::after{top:0;left:6px;width:3px;height:15px}
.acc details[open]>summary .pm::after{transform:rotate(90deg);opacity:0}
/* sliding switch */
.acc .knob{position:relative;flex:none;width:34px;height:20px;border-radius:99px;background:#7c8aa0;
  transition:background-color .2s}
.acc .knob::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:transform .2s}
.acc details[open]>summary .knob{background:#2563eb}
.acc details[open]>summary .knob::after{transform:translateX(14px)}
/* numbered index that stays put */
.acc-num summary{justify-content:flex-start;gap:12px}
.acc .idx{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;
  background:#f1f5f9;color:#475569;font-size:.78rem;font-weight:700}
.acc details[open]>summary .idx{background:#0f172a;color:#fff}
@media (prefers-reduced-motion:reduce){.acc summary,.acc .chev,.acc .pm::before,.acc .pm::after,.acc .knob,.acc .knob::after{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<div><span class="lbl">Rotating chevron</span>
<div class="accordion acc">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b2-4" aria-expanded="true" aria-controls="b2-4">What is included in the download?</button></h3>
<div id="b2-4" class="accordion-collapse collapse show">
<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="#b2-5" aria-expanded="false" aria-controls="b2-5">Can I use these commercially?</button></h3>
<div id="b2-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="#b2-6" aria-expanded="false" aria-controls="b2-6">Do they work on mobile?</button></h3>
<div id="b2-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>
<div><span class="lbl">Plus to minus</span>
<div class="accordion acc acc-plus">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b2-7" aria-expanded="true" aria-controls="b2-7">What is included in the download?<span class="pm" aria-hidden="true"></span></button></h3>
<div id="b2-7" class="accordion-collapse collapse show">
<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="#b2-8" aria-expanded="false" aria-controls="b2-8">Can I use these commercially?<span class="pm" aria-hidden="true"></span></button></h3>
<div id="b2-8" 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="#b2-9" aria-expanded="false" aria-controls="b2-9">Do they work on mobile?<span class="pm" aria-hidden="true"></span></button></h3>
<div id="b2-9" 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>
<div><span class="lbl">Toggle switch</span>
<div class="accordion acc acc-switch">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b2-10" aria-expanded="true" aria-controls="b2-10">What is included in the download?<span class="knob" aria-hidden="true"></span></button></h3>
<div id="b2-10" class="accordion-collapse collapse show">
<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="#b2-11" aria-expanded="false" aria-controls="b2-11">Can I use these commercially?<span class="knob" aria-hidden="true"></span></button></h3>
<div id="b2-11" 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="#b2-12" aria-expanded="false" aria-controls="b2-12">Do they work on mobile?<span class="knob" aria-hidden="true"></span></button></h3>
<div id="b2-12" 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>
<div><span class="lbl">Numbered</span>
<div class="accordion acc acc-num">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b2-1" aria-expanded="true" aria-controls="b2-1"><span class="idx" aria-hidden="true">1</span>What is included in the download?</button></h3>
<div id="b2-1" class="accordion-collapse collapse show">
<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="#b2-2" aria-expanded="false" aria-controls="b2-2"><span class="idx" aria-hidden="true">2</span>Can I use these commercially?</button></h3>
<div id="b2-2" 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="#b2-3" aria-expanded="false" aria-controls="b2-3"><span class="idx" aria-hidden="true">3</span>Do they work on mobile?</button></h3>
<div id="b2-3" 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; markers react to .accordion-button:not(.collapsed). */
.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}
/* the three custom markers replace Bootstrap's ::after chevron */
.acc-plus .accordion-button::after,.acc-switch .accordion-button::after,.acc-num .accordion-button::after{display:none}
/* plus that becomes a minus */
.acc .pm{position:relative;flex:none;width:15px;height:15px}
.acc .pm::before,.acc .pm::after{content:"";position:absolute;background:#64748b;border-radius:2px;
  transition:transform .2s,opacity .2s}
.acc .pm::before{top:6px;left:0;width:15px;height:3px}
.acc .pm::after{top:0;left:6px;width:3px;height:15px}
.acc .accordion-button:not(.collapsed) .pm::after{transform:rotate(90deg);opacity:0}
/* sliding switch */
.acc .knob{position:relative;flex:none;width:34px;height:20px;border-radius:99px;background:#7c8aa0;
  transition:background-color .2s}
.acc .knob::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:transform .2s}
.acc .accordion-button:not(.collapsed) .knob{background:#2563eb}
.acc .accordion-button:not(.collapsed) .knob::after{transform:translateX(14px)}
/* numbered index */
.acc-num .accordion-button{justify-content:flex-start;gap:12px}
.acc .idx{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;
  background:#f1f5f9;color:#475569;font-size:.78rem;font-weight:700}
.acc .accordion-button:not(.collapsed) .idx{background:#0f172a;color:#fff}
@media (prefers-reduced-motion:reduce){.acc .accordion-button,.acc .accordion-button::after,.acc .collapsing,
  .acc .pm::before,.acc .pm::after,.acc .knob,.acc .knob::after{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Rotating chevron</span>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" 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">
<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>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Plus to minus</span>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" 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="relative size-[15px] flex-none" aria-hidden="true"><span class="absolute top-[6px] left-0 h-[3px] w-[15px] rounded-[2px] bg-[#64748b]"></span><span class="absolute top-0 left-[6px] h-[15px] w-[3px] rounded-[2px] bg-[#64748b] transition-[rotate,opacity] duration-200 group-open:rotate-90 group-open:opacity-0 motion-reduce:transition-none"></span></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="relative size-[15px] flex-none" aria-hidden="true"><span class="absolute top-[6px] left-0 h-[3px] w-[15px] rounded-[2px] bg-[#64748b]"></span><span class="absolute top-0 left-[6px] h-[15px] w-[3px] rounded-[2px] bg-[#64748b] transition-[rotate,opacity] duration-200 group-open:rotate-90 group-open:opacity-0 motion-reduce:transition-none"></span></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="relative size-[15px] flex-none" aria-hidden="true"><span class="absolute top-[6px] left-0 h-[3px] w-[15px] rounded-[2px] bg-[#64748b]"></span><span class="absolute top-0 left-[6px] h-[15px] w-[3px] rounded-[2px] bg-[#64748b] transition-[rotate,opacity] duration-200 group-open:rotate-90 group-open:opacity-0 motion-reduce:transition-none"></span></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">Toggle switch</span>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" 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="relative h-5 w-[34px] flex-none rounded-full bg-[#7c8aa0] transition-colors duration-200 group-open:bg-[#2563eb] motion-reduce:transition-none" aria-hidden="true"><span class="absolute top-[3px] left-[3px] size-[14px] rounded-full bg-white transition-transform duration-200 group-open:translate-x-[14px] motion-reduce:transition-none"></span></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="relative h-5 w-[34px] flex-none rounded-full bg-[#7c8aa0] transition-colors duration-200 group-open:bg-[#2563eb] motion-reduce:transition-none" aria-hidden="true"><span class="absolute top-[3px] left-[3px] size-[14px] rounded-full bg-white transition-transform duration-200 group-open:translate-x-[14px] motion-reduce:transition-none"></span></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="relative h-5 w-[34px] flex-none rounded-full bg-[#7c8aa0] transition-colors duration-200 group-open:bg-[#2563eb] motion-reduce:transition-none" aria-hidden="true"><span class="absolute top-[3px] left-[3px] size-[14px] rounded-full bg-white transition-transform duration-200 group-open:translate-x-[14px] motion-reduce:transition-none"></span></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">Numbered</span>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" open>
<summary class="flex cursor-pointer list-none items-center justify-start gap-3 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"><span class="grid size-[25px] flex-none place-items-center rounded-full bg-[#f1f5f9] text-[.78rem] font-bold text-[#475569] group-open:bg-[#0f172a] group-open:text-white" aria-hidden="true">1</span>What is included in the download?</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-start gap-3 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"><span class="grid size-[25px] flex-none place-items-center rounded-full bg-[#f1f5f9] text-[.78rem] font-bold text-[#475569] group-open:bg-[#0f172a] group-open:text-white" aria-hidden="true">2</span>Can I use these commercially?</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-start gap-3 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"><span class="grid size-[25px] flex-none place-items-center rounded-full bg-[#f1f5f9] text-[.78rem] font-bold text-[#475569] group-open:bg-[#0f172a] group-open:text-white" aria-hidden="true">3</span>Do they work on mobile?</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

Four ways to show whether an accordion panel is open, all on the same bordered-card layout. The rotating chevron points down when closed and flips up when open, the most familiar signal. Plus to minus draws a plus from two bars and turns the vertical bar flat while fading it, leaving a minus; it suits FAQ pages where the plus reads as more. The toggle switch puts a small switch in the header that slides on and turns blue when the panel opens, useful for settings-style lists. Numbered puts a round index before each question that fills dark when its panel is open, for step-by-step guides where the order matters. Every marker is drawn in CSS from an empty span that is hidden from assistive technology, so there are no icon fonts or images. In plain CSS and Tailwind the markers react to the open attribute of a native details element; in Bootstrap they react to .accordion-button:not(.collapsed), and Bootstrap’s own chevron is kept for the first variant and hidden for the other three.

What’s included

  • Four markers: rotating chevron, plus to minus, toggle switch, numbered index
  • Markers drawn in CSS, no icon font or images
  • Markers are aria-hidden; state comes from the native element or aria-expanded
  • Switch off track darkened to meet 3:1 against the card
  • Marker transitions switch off under reduced motion

Accessibility

The headers are summary elements, or buttons with aria-expanded and aria-controls in the Bootstrap version, so the open state is announced without relying on the marker. The markers and index numbers are aria-hidden. Tab reaches each header, Enter or Space toggles it, focus shows a 2px blue outline, and all marker transitions are removed under prefers-reduced-motion.

Customise it

In plain CSS change the --acc-* properties on .acc and the colours in the .pm, .knob and .idx rules. The Bootstrap version uses the same .pm, .knob and .idx rules plus the --bs-accordion-* variables; in Tailwind edit the bg- classes on the marker spans and their group-open: variants.