|$ curl https://forge-ai.dev/api/markdown?path=docs/components/accordions
$cat docs/accordions.md
updated Recently·20 min read·published
Accordions
Introduction
Accordions compress long content into collapsible panels. This guide covers native HTML details/summary, single-open and multi-open JavaScript accordions, FAQ patterns, and framework implementations in Tailwind CSS and Bootstrap.
ℹ
info
Prefer <details> and <summary> for no-JS disclosure widgets. For custom animations or single-panel behavior, use a real <button> with aria-expanded and a controlled panel.
Details/Summary
Native HTML accordion using the <details> and <summary> elements — no JavaScript needed, fully accessible.
details
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <details class="accordion" open> |
| 3 | <summary class="accordion-header"> |
| 4 | What is this component? |
| 5 | <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 6 | <polyline points="6 9 12 15 18 9"/> |
| 7 | </svg> |
| 8 | </summary> |
| 9 | <div class="accordion-body"> |
| 10 | This is a native HTML accordion built with the details and summary elements. It supports an open state by default using the open attribute, and browsers handle all the show/hide logic natively. |
| 11 | </div> |
| 12 | </details> |
| 13 | <details class="accordion"> |
| 14 | <summary class="accordion-header"> |
| 15 | How does it work? |
| 16 | <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 17 | <polyline points="6 9 12 15 18 9"/> |
| 18 | </svg> |
| 19 | </summary> |
| 20 | <div class="accordion-body"> |
| 21 | The details element creates a disclosure widget. When open, its contents are visible. The summary element provides the visible label. Clicking the summary toggles the open state automatically. |
| 22 | </div> |
| 23 | </details> |
| 24 | <details class="accordion"> |
| 25 | <summary class="accordion-header"> |
| 26 | What are the benefits? |
| 27 | <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 28 | <polyline points="6 9 12 15 18 9"/> |
| 29 | </svg> |
| 30 | </summary> |
| 31 | <div class="accordion-body"> |
| 32 | Zero JavaScript required, built-in keyboard navigation (Enter/Space to toggle), screen reader friendly, and semantic HTML that works with any CSS framework. |
| 33 | </div> |
| 34 | </details> |
| 35 | </div> |
untitled.css
CSS
| 1 | body { |
| 2 | font-family:system-ui, |
| 3 | sans-serif; |
| 4 | background:#0A0A0A; |
| 5 | padding:24px |
| 6 | } |
| 7 | .wrapper { |
| 8 | max-width:450px; |
| 9 | margin:0 auto; |
| 10 | display:flex; |
| 11 | flex-direction:column; |
| 12 | gap:8px |
| 13 | } |
| 14 | .accordion { |
| 15 | border-radius:8px; |
| 16 | border:1px solid #2A2A2A; |
| 17 | overflow:hidden; |
| 18 | background:#111; |
| 19 | transition:border-color .2s |
| 20 | } |
| 21 | .accordion[open] { |
| 22 | border-color:rgba(0, |
| 23 | 255, |
| 24 | 65, |
| 25 | 0.3) |
| 26 | } |
| 27 | .accordion-header { |
| 28 | display:flex; |
| 29 | align-items:center; |
| 30 | justify-content:space-between; |
| 31 | padding:14px 16px; |
| 32 | font-size:13px; |
| 33 | font-weight:600; |
| 34 | color:#E0E0E0; |
| 35 | cursor:pointer; |
| 36 | user-select:none; |
| 37 | list-style:none; |
| 38 | transition:color .2s |
| 39 | } |
| 40 | .accordion-header::-webkit-details-marker { |
| 41 | display:none |
| 42 | } |
| 43 | .accordion-header:hover { |
| 44 | color:#00FF41 |
| 45 | } |
| 46 | .icon { |
| 47 | color:#666; |
| 48 | transition:transform .2s |
| 49 | } |
| 50 | .accordion[open] .icon { |
| 51 | transform:rotate(180deg); |
| 52 | color:#00FF41 |
| 53 | } |
| 54 | .accordion-body { |
| 55 | padding:0 16px 14px; |
| 56 | font-size:12px; |
| 57 | color:#A0A0A0; |
| 58 | line-height:1.6; |
| 59 | border-top:1px solid #2A2A2A; |
| 60 | padding-top:12px |
| 61 | } |
untitled.html
HTML
| 1 | <div class="w-full max-w-md mx-auto p-6 space-y-2 bg-[#0A0A0A]"> |
| 2 | <details class="group rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111] open:border-[rgba(0,255,65,0.3)]" open> |
| 3 | <summary class="flex items-center justify-between px-4 py-3.5 text-[13px] font-semibold text-[#E0E0E0] cursor-pointer list-none select-none transition-colors hover:text-[#00FF41]"> |
| 4 | What is this component? |
| 5 | <svg class="w-4 h-4 text-[#666] group-open:text-[#00FF41] group-open:rotate-180 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 6 | <polyline points="6 9 12 15 18 9"/> |
| 7 | </svg> |
| 8 | </summary> |
| 9 | <div class="px-4 pb-3.5 text-xs text-[#A0A0A0] leading-relaxed border-t border-[#2A2A2A] pt-3"> |
| 10 | Native HTML disclosure widget. Browsers handle toggle, focus, and keyboard activation automatically. |
| 11 | </div> |
| 12 | </details> |
| 13 | <details class="group rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111] open:border-[rgba(0,255,65,0.3)]"> |
| 14 | <summary class="flex items-center justify-between px-4 py-3.5 text-[13px] font-semibold text-[#E0E0E0] cursor-pointer list-none select-none transition-colors hover:text-[#00FF41]"> |
| 15 | How does it work? |
| 16 | <svg class="w-4 h-4 text-[#666] group-open:text-[#00FF41] group-open:rotate-180 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 17 | <polyline points="6 9 12 15 18 9"/> |
| 18 | </svg> |
| 19 | </summary> |
| 20 | <div class="px-4 pb-3.5 text-xs text-[#A0A0A0] leading-relaxed border-t border-[#2A2A2A] pt-3"> |
| 21 | Clicking the summary toggles the open attribute on the details element. |
| 22 | </div> |
| 23 | </details> |
| 24 | <details class="group rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111] open:border-[rgba(0,255,65,0.3)]"> |
| 25 | <summary class="flex items-center justify-between px-4 py-3.5 text-[13px] font-semibold text-[#E0E0E0] cursor-pointer list-none select-none transition-colors hover:text-[#00FF41]"> |
| 26 | What are the benefits? |
| 27 | <svg class="w-4 h-4 text-[#666] group-open:text-[#00FF41] group-open:rotate-180 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 28 | <polyline points="6 9 12 15 18 9"/> |
| 29 | </svg> |
| 30 | </summary> |
| 31 | <div class="px-4 pb-3.5 text-xs text-[#A0A0A0] leading-relaxed border-t border-[#2A2A2A] pt-3"> |
| 32 | No JavaScript, built-in accessibility, keyboard support, and semantic HTML that works with any CSS framework. |
| 33 | </div> |
| 34 | </details> |
| 35 | </div> |
untitled.html
HTML
| 1 | <div class="accordion" id="accNative" style="max-width:450px;margin:0 auto;"> |
| 2 | <div class="accordion-item"> |
| 3 | <h2 class="accordion-header"> |
| 4 | <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#n1" aria-expanded="true"> |
| 5 | What is this component? |
| 6 | </button> |
| 7 | </h2> |
| 8 | <div id="n1" class="accordion-collapse collapse show" data-bs-parent="#accNative"> |
| 9 | <div class="accordion-body"> |
| 10 | Native HTML disclosure widget. Browsers handle toggle, focus, and keyboard activation automatically. |
| 11 | </div> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="accordion-item"> |
| 15 | <h2 class="accordion-header"> |
| 16 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#n2" aria-expanded="false"> |
| 17 | How does it work? |
| 18 | </button> |
| 19 | </h2> |
| 20 | <div id="n2" class="accordion-collapse collapse" data-bs-parent="#accNative"> |
| 21 | <div class="accordion-body"> |
| 22 | Clicking the summary toggles the open attribute on the details element. |
| 23 | </div> |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="accordion-item"> |
| 27 | <h2 class="accordion-header"> |
| 28 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#n3" aria-expanded="false"> |
| 29 | What are the benefits? |
| 30 | </button> |
| 31 | </h2> |
| 32 | <div id="n3" class="accordion-collapse collapse" data-bs-parent="#accNative"> |
| 33 | <div class="accordion-body"> |
| 34 | No JavaScript, built-in accessibility, keyboard support, and semantic HTML that works with any CSS framework. |
| 35 | </div> |
| 36 | </div> |
| 37 | </div> |
| 38 | </div> |
| 39 | <style> |
| 40 | .accordion-item{background:#111;border-color:#2A2A2A;} |
| 41 | .accordion-button{background:#151515;color:#E0E0E0;font-size:13px;font-weight:600;padding:14px 16px;} |
| 42 | .accordion-button:not(.collapsed){background:#00FF41;color:#0A0A0A;box-shadow:none;} |
| 43 | .accordion-button::after{filter:invert(1) grayscale(100%) brightness(200%);} |
| 44 | .accordion-button:not(.collapsed)::after{filter:invert(0);} |
| 45 | .accordion-body{background:#111;color:#A0A0A0;font-size:12px;line-height:1.6;} |
| 46 | </style> |
JavaScript Accordion
Custom accordion with animated open/close and single-item-only mode — only one panel open at a time.
js-accordion
Live
untitled.html
HTML
| 1 | <div class="wrapper" data-single-group> |
| 2 | <div class="js-accordion"> |
| 3 | <button class="js-header"> |
| 4 | <span> |
| 5 | Account Settings |
| 6 | </span> |
| 7 | <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 8 | <polyline points="6 9 12 15 18 9"/> |
| 9 | </svg> |
| 10 | </button> |
| 11 | <div class="js-body"> |
| 12 | <div class="js-inner"> |
| 13 | Manage your profile, password, and connected accounts. |
| 14 | </div> |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="js-accordion"> |
| 18 | <button class="js-header"> |
| 19 | <span> |
| 20 | Notifications |
| 21 | </span> |
| 22 | <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 23 | <polyline points="6 9 12 15 18 9"/> |
| 24 | </svg> |
| 25 | </button> |
| 26 | <div class="js-body"> |
| 27 | <div class="js-inner"> |
| 28 | Choose which emails, push alerts, and in-app messages you receive. |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div class="js-accordion"> |
| 33 | <button class="js-header"> |
| 34 | <span> |
| 35 | Privacy |
| 36 | </span> |
| 37 | <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 38 | <polyline points="6 9 12 15 18 9"/> |
| 39 | </svg> |
| 40 | </button> |
| 41 | <div class="js-body"> |
| 42 | <div class="js-inner"> |
| 43 | Review how your data is used, exported, and shared with third parties. |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
| 47 | </div> |
untitled.css
CSS
| 1 | body { |
| 2 | font-family:system-ui, |
| 3 | sans-serif; |
| 4 | background:#0A0A0A; |
| 5 | padding:24px |
| 6 | } |
| 7 | .wrapper { |
| 8 | max-width:450px; |
| 9 | margin:0 auto; |
| 10 | display:flex; |
| 11 | flex-direction:column; |
| 12 | gap:6px |
| 13 | } |
| 14 | .js-accordion { |
| 15 | border-radius:8px; |
| 16 | border:1px solid #2A2A2A; |
| 17 | overflow:hidden; |
| 18 | background:#111; |
| 19 | transition:border-color .2s |
| 20 | } |
| 21 | .js-accordion.open { |
| 22 | border-color:rgba(0, |
| 23 | 255, |
| 24 | 65, |
| 25 | 0.3) |
| 26 | } |
| 27 | .js-header { |
| 28 | display:flex; |
| 29 | align-items:center; |
| 30 | justify-content:space-between; |
| 31 | width:100%; |
| 32 | padding:14px 16px; |
| 33 | font-size:13px; |
| 34 | font-weight:600; |
| 35 | color:#E0E0E0; |
| 36 | cursor:pointer; |
| 37 | border:none; |
| 38 | background:transparent; |
| 39 | transition:color .2s |
| 40 | } |
| 41 | .js-header:hover { |
| 42 | color:#00FF41 |
| 43 | } |
| 44 | .arrow { |
| 45 | transition:transform .3s ease; |
| 46 | color:#666 |
| 47 | } |
| 48 | .open .arrow { |
| 49 | transform:rotate(180deg); |
| 50 | color:#00FF41 |
| 51 | } |
| 52 | .js-body { |
| 53 | max-height:0; |
| 54 | overflow:hidden; |
| 55 | transition:max-height .3s ease |
| 56 | } |
| 57 | .js-inner { |
| 58 | padding:0 16px 14px; |
| 59 | border-top:1px solid #2A2A2A; |
| 60 | padding-top:12px; |
| 61 | font-size:12px; |
| 62 | color:#A0A0A0; |
| 63 | line-height:1.6 |
| 64 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('[data-single-group]').forEach(group=>{group.querySelectorAll('.js-header').forEach(btn=>{btn.addEventListener('click',()=>{const item=btn.parentElement;const body=item.querySelector('.js-body');const isOpen=item.classList.contains('open');group.querySelectorAll('.js-accordion.open').forEach(el=>{if(el!==item){el.classList.remove('open');el.querySelector('.js-body').style.maxHeight='0'}});if(isOpen){item.classList.remove('open');body.style.maxHeight='0'}else{item.classList.add('open');body.style.maxHeight=body.scrollHeight+'px'}})})}) |
untitled.html
HTML
| 1 | <div class="w-full max-w-md mx-auto p-6 space-y-1.5 bg-[#0A0A0A]" data-tw-single> |
| 2 | <div class="rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111] transition-colors" data-item> |
| 3 | <button class="w-full flex items-center justify-between px-4 py-3.5 text-[13px] font-semibold text-[#E0E0E0] bg-transparent border-none cursor-pointer transition-colors hover:text-[#00FF41]" data-trigger> |
| 4 | <span> |
| 5 | Account Settings |
| 6 | </span> |
| 7 | <svg class="w-4 h-4 text-[#666] transition-transform duration-300" data-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 8 | <polyline points="6 9 12 15 18 9"/> |
| 9 | </svg> |
| 10 | </button> |
| 11 | <div class="max-h-0 overflow-hidden transition-[max-height] duration-300" data-panel> |
| 12 | <div class="px-4 pb-3.5 text-xs text-[#A0A0A0] leading-relaxed border-t border-[#2A2A2A] pt-3"> |
| 13 | Manage your profile, password, and connected accounts. |
| 14 | </div> |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111] transition-colors" data-item> |
| 18 | <button class="w-full flex items-center justify-between px-4 py-3.5 text-[13px] font-semibold text-[#E0E0E0] bg-transparent border-none cursor-pointer transition-colors hover:text-[#00FF41]" data-trigger> |
| 19 | <span> |
| 20 | Notifications |
| 21 | </span> |
| 22 | <svg class="w-4 h-4 text-[#666] transition-transform duration-300" data-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 23 | <polyline points="6 9 12 15 18 9"/> |
| 24 | </svg> |
| 25 | </button> |
| 26 | <div class="max-h-0 overflow-hidden transition-[max-height] duration-300" data-panel> |
| 27 | <div class="px-4 pb-3.5 text-xs text-[#A0A0A0] leading-relaxed border-t border-[#2A2A2A] pt-3"> |
| 28 | Choose which emails, push alerts, and in-app messages you receive. |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div class="rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111] transition-colors" data-item> |
| 33 | <button class="w-full flex items-center justify-between px-4 py-3.5 text-[13px] font-semibold text-[#E0E0E0] bg-transparent border-none cursor-pointer transition-colors hover:text-[#00FF41]" data-trigger> |
| 34 | <span> |
| 35 | Privacy |
| 36 | </span> |
| 37 | <svg class="w-4 h-4 text-[#666] transition-transform duration-300" data-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 38 | <polyline points="6 9 12 15 18 9"/> |
| 39 | </svg> |
| 40 | </button> |
| 41 | <div class="max-h-0 overflow-hidden transition-[max-height] duration-300" data-panel> |
| 42 | <div class="px-4 pb-3.5 text-xs text-[#A0A0A0] leading-relaxed border-t border-[#2A2A2A] pt-3"> |
| 43 | Review how your data is used, exported, and shared with third parties. |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
| 47 | </div> |
untitled.html
HTML
| 1 | <div class="accordion" id="accSingle" style="max-width:450px;margin:0 auto;"> |
| 2 | <div class="accordion-item"> |
| 3 | <h2 class="accordion-header"> |
| 4 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#s1"> |
| 5 | Account Settings |
| 6 | </button> |
| 7 | </h2> |
| 8 | <div id="s1" class="accordion-collapse collapse" data-bs-parent="#accSingle"> |
| 9 | <div class="accordion-body"> |
| 10 | Manage your profile, password, and connected accounts. |
| 11 | </div> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="accordion-item"> |
| 15 | <h2 class="accordion-header"> |
| 16 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#s2"> |
| 17 | Notifications |
| 18 | </button> |
| 19 | </h2> |
| 20 | <div id="s2" class="accordion-collapse collapse" data-bs-parent="#accSingle"> |
| 21 | <div class="accordion-body"> |
| 22 | Choose which emails, push alerts, and in-app messages you receive. |
| 23 | </div> |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="accordion-item"> |
| 27 | <h2 class="accordion-header"> |
| 28 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#s3"> |
| 29 | Privacy |
| 30 | </button> |
| 31 | </h2> |
| 32 | <div id="s3" class="accordion-collapse collapse" data-bs-parent="#accSingle"> |
| 33 | <div class="accordion-body"> |
| 34 | Review how your data is used, exported, and shared with third parties. |
| 35 | </div> |
| 36 | </div> |
| 37 | </div> |
| 38 | </div> |
| 39 | <style> |
| 40 | .accordion-item{background:#111;border-color:#2A2A2A;} |
| 41 | .accordion-button{background:#151515;color:#E0E0E0;font-size:13px;font-weight:600;padding:14px 16px;} |
| 42 | .accordion-button:not(.collapsed){background:#00FF41;color:#0A0A0A;box-shadow:none;} |
| 43 | .accordion-button::after{filter:invert(1) grayscale(100%) brightness(200%);} |
| 44 | .accordion-button:not(.collapsed)::after{filter:invert(0);} |
| 45 | .accordion-body{background:#111;color:#A0A0A0;font-size:12px;line-height:1.6;} |
| 46 | </style> |
FAQ Style
FAQ-style accordion with compact design, larger click targets, and smooth transitions.
faq
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="faq-item"> |
| 3 | <button class="faq-q"> |
| 4 | How do I reset my password? |
| 5 | <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"> |
| 6 | <polyline points="6 9 12 15 18 9"/> |
| 7 | </svg> |
| 8 | </button> |
| 9 | <div class="faq-a"> |
| 10 | <p> |
| 11 | Go to Settings > Security > Reset Password. Enter your email address and we'll send you a reset link. The link expires in 24 hours. |
| 12 | </p> |
| 13 | </div> |
| 14 | </div> |
| 15 | <div class="faq-item"> |
| 16 | <button class="faq-q"> |
| 17 | Can I export my data? |
| 18 | <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"> |
| 19 | <polyline points="6 9 12 15 18 9"/> |
| 20 | </svg> |
| 21 | </button> |
| 22 | <div class="faq-a"> |
| 23 | <p> |
| 24 | Yes. Navigate to Settings > Data > Export. You can download your data as JSON, CSV, or PDF. Large exports are emailed as a zip file. |
| 25 | </p> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="faq-item"> |
| 29 | <button class="faq-q"> |
| 30 | Is there a mobile app? |
| 31 | <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"> |
| 32 | <polyline points="6 9 12 15 18 9"/> |
| 33 | </svg> |
| 34 | </button> |
| 35 | <div class="faq-a"> |
| 36 | <p> |
| 37 | Our mobile app is available on iOS and Android. Download it from the App Store or Google Play Store for on-the-go access. |
| 38 | </p> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
untitled.css
CSS
| 1 | body { |
| 2 | font-family:system-ui, |
| 3 | sans-serif; |
| 4 | background:#0A0A0A; |
| 5 | padding:24px |
| 6 | } |
| 7 | .wrapper { |
| 8 | max-width:500px; |
| 9 | margin:0 auto; |
| 10 | display:flex; |
| 11 | flex-direction:column; |
| 12 | gap:6px |
| 13 | } |
| 14 | .faq-item { |
| 15 | border-radius:8px; |
| 16 | border:1px solid #2A2A2A; |
| 17 | overflow:hidden; |
| 18 | background:#111 |
| 19 | } |
| 20 | .faq-q { |
| 21 | display:flex; |
| 22 | align-items:center; |
| 23 | justify-content:space-between; |
| 24 | width:100%; |
| 25 | padding:16px; |
| 26 | font-size:13px; |
| 27 | font-weight:500; |
| 28 | color:#E0E0E0; |
| 29 | cursor:pointer; |
| 30 | border:none; |
| 31 | background:transparent; |
| 32 | transition:color .2s; |
| 33 | text-align:left |
| 34 | } |
| 35 | .faq-q:hover { |
| 36 | color:#00FF41 |
| 37 | } |
| 38 | .faq-icon { |
| 39 | transition:transform .3s ease; |
| 40 | color:#666; |
| 41 | flex-shrink:0 |
| 42 | } |
| 43 | .faq-q.active .faq-icon { |
| 44 | transform:rotate(180deg); |
| 45 | color:#00FF41 |
| 46 | } |
| 47 | .faq-a { |
| 48 | max-height:0; |
| 49 | overflow:hidden; |
| 50 | transition:max-height .3s ease; |
| 51 | padding:0 16px; |
| 52 | font-size:12px; |
| 53 | color:#A0A0A0; |
| 54 | line-height:1.6; |
| 55 | border-top:1px solid transparent |
| 56 | } |
| 57 | .faq-a.open { |
| 58 | max-height:200px; |
| 59 | padding:0 16px 14px; |
| 60 | border-top-color:#2A2A2A |
| 61 | } |
| 62 | .faq-a p { |
| 63 | margin:0; |
| 64 | padding-top:12px |
| 65 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.faq-q').forEach(btn=>{btn.addEventListener('click',()=>{const answer=btn.nextElementSibling;const icon=btn.querySelector('.faq-icon');const isOpen=answer.classList.contains('open');document.querySelectorAll('.faq-a.open').forEach(el=>{el.classList.remove('open');el.previousElementSibling.classList.remove('active')});if(!isOpen){answer.classList.add('open');btn.classList.add('active')}})}) |
untitled.html
HTML
| 1 | <div class="w-full max-w-lg mx-auto p-6 space-y-1.5 bg-[#0A0A0A]" data-tw-faq> |
| 2 | <div class="rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111]"> |
| 3 | <button class="w-full flex items-center justify-between px-4 py-4 text-[13px] font-medium text-[#E0E0E0] bg-transparent border-none cursor-pointer transition-colors hover:text-[#00FF41] text-left" data-faq-q> |
| 4 | How do I reset my password? |
| 5 | <svg class="w-3.5 h-3.5 text-[#666] transition-transform duration-300" data-faq-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 6 | <polyline points="6 9 12 15 18 9"/> |
| 7 | </svg> |
| 8 | </button> |
| 9 | <div class="max-h-0 overflow-hidden transition-[max-height] duration-300 px-4 text-xs text-[#A0A0A0] leading-relaxed border-t border-transparent" data-faq-a> |
| 10 | <p class="pt-3 pb-3.5"> |
| 11 | Go to Settings > Security > Reset Password. Enter your email address and we'll send you a reset link. The link expires in 24 hours. |
| 12 | </p> |
| 13 | </div> |
| 14 | </div> |
| 15 | <div class="rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111]"> |
| 16 | <button class="w-full flex items-center justify-between px-4 py-4 text-[13px] font-medium text-[#E0E0E0] bg-transparent border-none cursor-pointer transition-colors hover:text-[#00FF41] text-left" data-faq-q> |
| 17 | Can I export my data? |
| 18 | <svg class="w-3.5 h-3.5 text-[#666] transition-transform duration-300" data-faq-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <polyline points="6 9 12 15 18 9"/> |
| 20 | </svg> |
| 21 | </button> |
| 22 | <div class="max-h-0 overflow-hidden transition-[max-height] duration-300 px-4 text-xs text-[#A0A0A0] leading-relaxed border-t border-transparent" data-faq-a> |
| 23 | <p class="pt-3 pb-3.5"> |
| 24 | Yes. Navigate to Settings > Data > Export. You can download your data as JSON, CSV, or PDF. Large exports are emailed as a zip file. |
| 25 | </p> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111]"> |
| 29 | <button class="w-full flex items-center justify-between px-4 py-4 text-[13px] font-medium text-[#E0E0E0] bg-transparent border-none cursor-pointer transition-colors hover:text-[#00FF41] text-left" data-faq-q> |
| 30 | Is there a mobile app? |
| 31 | <svg class="w-3.5 h-3.5 text-[#666] transition-transform duration-300" data-faq-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 32 | <polyline points="6 9 12 15 18 9"/> |
| 33 | </svg> |
| 34 | </button> |
| 35 | <div class="max-h-0 overflow-hidden transition-[max-height] duration-300 px-4 text-xs text-[#A0A0A0] leading-relaxed border-t border-transparent" data-faq-a> |
| 36 | <p class="pt-3 pb-3.5"> |
| 37 | Our mobile app is available on iOS and Android. Download it from the App Store or Google Play Store for on-the-go access. |
| 38 | </p> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
untitled.html
HTML
| 1 | <div class="accordion" id="accFaq" style="max-width:500px;margin:0 auto;"> |
| 2 | <div class="accordion-item"> |
| 3 | <h2 class="accordion-header"> |
| 4 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#f1"> |
| 5 | How do I reset my password? |
| 6 | </button> |
| 7 | </h2> |
| 8 | <div id="f1" class="accordion-collapse collapse" data-bs-parent="#accFaq"> |
| 9 | <div class="accordion-body"> |
| 10 | Go to Settings > Security > Reset Password. Enter your email address and we'll send you a reset link. The link expires in 24 hours. |
| 11 | </div> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="accordion-item"> |
| 15 | <h2 class="accordion-header"> |
| 16 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#f2"> |
| 17 | Can I export my data? |
| 18 | </button> |
| 19 | </h2> |
| 20 | <div id="f2" class="accordion-collapse collapse" data-bs-parent="#accFaq"> |
| 21 | <div class="accordion-body"> |
| 22 | Yes. Navigate to Settings > Data > Export. You can download your data as JSON, CSV, or PDF. Large exports are emailed as a zip file. |
| 23 | </div> |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="accordion-item"> |
| 27 | <h2 class="accordion-header"> |
| 28 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#f3"> |
| 29 | Is there a mobile app? |
| 30 | </button> |
| 31 | </h2> |
| 32 | <div id="f3" class="accordion-collapse collapse" data-bs-parent="#accFaq"> |
| 33 | <div class="accordion-body"> |
| 34 | Our mobile app is available on iOS and Android. Download it from the App Store or Google Play Store for on-the-go access. |
| 35 | </div> |
| 36 | </div> |
| 37 | </div> |
| 38 | </div> |
| 39 | <style> |
| 40 | .accordion-item{background:#111;border-color:#2A2A2A;} |
| 41 | .accordion-button{background:#151515;color:#E0E0E0;font-size:13px;font-weight:600;padding:14px 16px;} |
| 42 | .accordion-button:not(.collapsed){background:#00FF41;color:#0A0A0A;box-shadow:none;} |
| 43 | .accordion-button::after{filter:invert(1) grayscale(100%) brightness(200%);} |
| 44 | .accordion-button:not(.collapsed)::after{filter:invert(0);} |
| 45 | .accordion-body{background:#111;color:#A0A0A0;font-size:12px;line-height:1.6;} |
| 46 | </style> |
Multi-Open Accordion
Independent panels that stay open until the user closes them. Useful for comparison or reference content.
multi-open
Live
untitled.html
HTML
| 1 | <div class="wrapper" data-multi-group> |
| 2 | <div class="card"> |
| 3 | <button class="card-header"> |
| 4 | <span> |
| 5 | Plan |
| 6 | </span> |
| 7 | <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 8 | <polyline points="6 9 12 15 18 9"/> |
| 9 | </svg> |
| 10 | </button> |
| 11 | <div class="card-body"> |
| 12 | <div class="card-body-inner"> |
| 13 | Define scope, user stories, and architecture before writing code. |
| 14 | </div> |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="card"> |
| 18 | <button class="card-header"> |
| 19 | <span> |
| 20 | Build |
| 21 | </span> |
| 22 | <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 23 | <polyline points="6 9 12 15 18 9"/> |
| 24 | </svg> |
| 25 | </button> |
| 26 | <div class="card-body"> |
| 27 | <div class="card-body-inner"> |
| 28 | Develop features in small iterations with continuous integration and review. |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div class="card"> |
| 33 | <button class="card-header"> |
| 34 | <span> |
| 35 | Launch |
| 36 | </span> |
| 37 | <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 38 | <polyline points="6 9 12 15 18 9"/> |
| 39 | </svg> |
| 40 | </button> |
| 41 | <div class="card-body"> |
| 42 | <div class="card-body-inner"> |
| 43 | Deploy to production, monitor health, and iterate based on real usage. |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
| 47 | </div> |
untitled.css
CSS
| 1 | body { |
| 2 | font-family:system-ui, |
| 3 | sans-serif; |
| 4 | background:#0A0A0A; |
| 5 | padding:24px |
| 6 | } |
| 7 | .wrapper { |
| 8 | max-width:450px; |
| 9 | margin:0 auto; |
| 10 | display:flex; |
| 11 | flex-direction:column; |
| 12 | gap:6px |
| 13 | } |
| 14 | .card { |
| 15 | border-radius:8px; |
| 16 | border:1px solid #2A2A2A; |
| 17 | overflow:hidden; |
| 18 | background:#111; |
| 19 | transition:border-color .2s |
| 20 | } |
| 21 | .card.open { |
| 22 | border-color:rgba(0, |
| 23 | 255, |
| 24 | 65, |
| 25 | 0.3) |
| 26 | } |
| 27 | .card-header { |
| 28 | display:flex; |
| 29 | align-items:center; |
| 30 | justify-content:space-between; |
| 31 | width:100%; |
| 32 | padding:14px 16px; |
| 33 | font-size:13px; |
| 34 | font-weight:600; |
| 35 | color:#E0E0E0; |
| 36 | cursor:pointer; |
| 37 | border:none; |
| 38 | background:transparent; |
| 39 | transition:color .2s |
| 40 | } |
| 41 | .card-header:hover { |
| 42 | color:#00FF41 |
| 43 | } |
| 44 | .arrow { |
| 45 | transition:transform .3s ease; |
| 46 | color:#666 |
| 47 | } |
| 48 | .open .arrow { |
| 49 | transform:rotate(180deg); |
| 50 | color:#00FF41 |
| 51 | } |
| 52 | .card-body { |
| 53 | max-height:0; |
| 54 | overflow:hidden; |
| 55 | transition:max-height .3s ease |
| 56 | } |
| 57 | .card-body-inner { |
| 58 | padding:0 16px 14px; |
| 59 | border-top:1px solid #2A2A2A; |
| 60 | padding-top:12px; |
| 61 | font-size:12px; |
| 62 | color:#A0A0A0; |
| 63 | line-height:1.6 |
| 64 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('[data-multi-group] .card-header').forEach(btn=>{btn.addEventListener('click',()=>{const card=btn.parentElement;const body=card.querySelector('.card-body');const isOpen=card.classList.contains('open');if(isOpen){card.classList.remove('open');body.style.maxHeight='0'}else{card.classList.add('open');body.style.maxHeight=body.scrollHeight+'px'}})}) |
untitled.html
HTML
| 1 | <div class="w-full max-w-md mx-auto p-6 space-y-1.5 bg-[#0A0A0A]" data-tw-multi> |
| 2 | <div class="rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111] transition-colors" data-card> |
| 3 | <button class="w-full flex items-center justify-between px-4 py-3.5 text-[13px] font-semibold text-[#E0E0E0] bg-transparent border-none cursor-pointer transition-colors hover:text-[#00FF41]" data-card-trigger> |
| 4 | <span> |
| 5 | Plan |
| 6 | </span> |
| 7 | <svg class="w-4 h-4 text-[#666] transition-transform duration-300" data-card-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 8 | <polyline points="6 9 12 15 18 9"/> |
| 9 | </svg> |
| 10 | </button> |
| 11 | <div class="max-h-0 overflow-hidden transition-[max-height] duration-300" data-card-panel> |
| 12 | <div class="px-4 pb-3.5 text-xs text-[#A0A0A0] leading-relaxed border-t border-[#2A2A2A] pt-3"> |
| 13 | Define scope, user stories, and architecture before writing code. |
| 14 | </div> |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111] transition-colors" data-card> |
| 18 | <button class="w-full flex items-center justify-between px-4 py-3.5 text-[13px] font-semibold text-[#E0E0E0] bg-transparent border-none cursor-pointer transition-colors hover:text-[#00FF41]" data-card-trigger> |
| 19 | <span> |
| 20 | Build |
| 21 | </span> |
| 22 | <svg class="w-4 h-4 text-[#666] transition-transform duration-300" data-card-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 23 | <polyline points="6 9 12 15 18 9"/> |
| 24 | </svg> |
| 25 | </button> |
| 26 | <div class="max-h-0 overflow-hidden transition-[max-height] duration-300" data-card-panel> |
| 27 | <div class="px-4 pb-3.5 text-xs text-[#A0A0A0] leading-relaxed border-t border-[#2A2A2A] pt-3"> |
| 28 | Develop features in small iterations with continuous integration and review. |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div class="rounded-lg border border-[#2A2A2A] overflow-hidden bg-[#111] transition-colors" data-card> |
| 33 | <button class="w-full flex items-center justify-between px-4 py-3.5 text-[13px] font-semibold text-[#E0E0E0] bg-transparent border-none cursor-pointer transition-colors hover:text-[#00FF41]" data-card-trigger> |
| 34 | <span> |
| 35 | Launch |
| 36 | </span> |
| 37 | <svg class="w-4 h-4 text-[#666] transition-transform duration-300" data-card-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 38 | <polyline points="6 9 12 15 18 9"/> |
| 39 | </svg> |
| 40 | </button> |
| 41 | <div class="max-h-0 overflow-hidden transition-[max-height] duration-300" data-card-panel> |
| 42 | <div class="px-4 pb-3.5 text-xs text-[#A0A0A0] leading-relaxed border-t border-[#2A2A2A] pt-3"> |
| 43 | Deploy to production, monitor health, and iterate based on real usage. |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
| 47 | </div> |
untitled.html
HTML
| 1 | <div class="accordion" id="accMulti" style="max-width:450px;margin:0 auto;"> |
| 2 | <div class="accordion-item"> |
| 3 | <h2 class="accordion-header"> |
| 4 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#m1"> |
| 5 | Plan |
| 6 | </button> |
| 7 | </h2> |
| 8 | <div id="m1" class="accordion-collapse collapse"> |
| 9 | <div class="accordion-body"> |
| 10 | Define scope, user stories, and architecture before writing code. |
| 11 | </div> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="accordion-item"> |
| 15 | <h2 class="accordion-header"> |
| 16 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#m2"> |
| 17 | Build |
| 18 | </button> |
| 19 | </h2> |
| 20 | <div id="m2" class="accordion-collapse collapse"> |
| 21 | <div class="accordion-body"> |
| 22 | Develop features in small iterations with continuous integration and review. |
| 23 | </div> |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="accordion-item"> |
| 27 | <h2 class="accordion-header"> |
| 28 | <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#m3"> |
| 29 | Launch |
| 30 | </button> |
| 31 | </h2> |
| 32 | <div id="m3" class="accordion-collapse collapse"> |
| 33 | <div class="accordion-body"> |
| 34 | Deploy to production, monitor health, and iterate based on real usage. |
| 35 | </div> |
| 36 | </div> |
| 37 | </div> |
| 38 | </div> |
| 39 | <style> |
| 40 | .accordion-item{background:#111;border-color:#2A2A2A;} |
| 41 | .accordion-button{background:#151515;color:#E0E0E0;font-size:13px;font-weight:600;padding:14px 16px;} |
| 42 | .accordion-button:not(.collapsed){background:#00FF41;color:#0A0A0A;box-shadow:none;} |
| 43 | .accordion-button::after{filter:invert(1) grayscale(100%) brightness(200%);} |
| 44 | .accordion-button:not(.collapsed)::after{filter:invert(0);} |
| 45 | .accordion-body{background:#111;color:#A0A0A0;font-size:12px;line-height:1.6;} |
| 46 | </style> |
Accessibility
Accordions hide content until requested, so screen-reader users and keyboard users need clear state and focus management.
- Use <details>/<summary> for native keyboard support and automatic aria-expanded mapping.
- Custom accordions need a real <button> trigger with aria-expanded and aria-controls pointing to the panel id.
- Keep focus visible; add a focus ring or outline on the trigger.
- Single-open groups should move focus logically and announce the expanded panel.
- Avoid nesting interactive controls inside the summary or trigger unless the pattern is truly needed.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.