Settings

Panel Count

Mode

Accent Color

Border Radius

8px

Gap

4px

Edit Panel Content

Live Preview

Generated Code

...

💡 How to Use

1. Adjust panel count and style parameters
2. Edit each panel's title and content (HTML supported)
3. Preview the accordion in real-time
4. Switch between HTML/CSS/Full code views, one-click copy

❓ FAQ

Single vs Multiple mode?

Single mode (Accordion) allows only one panel open at a time — opening a new panel closes others. Multiple mode (Collapsible) lets you open several panels simultaneously. Single is best for FAQ lists; Multiple works well for categorized content.

Does the generated code include JavaScript?

It's pure HTML+CSS using the checkbox/radio hack. No JavaScript needed, excellent browser compatibility. You can add JS enhancements if desired.

How to integrate into an existing project?

Copy the HTML and CSS code into your project. All classes are prefixed with accordion-xx to avoid conflicts. Customize accent color, border radius, and spacing to match your design.

\n`; code.textContent = currentTab==='html'?html:currentTab==='css'?css:full; } itemCount.addEventListener('input',sync); mode.addEventListener('change',()=>{renderPreview();renderCode();}); accentColor.addEventListener('input',()=>{renderPreview();renderCode();}); borderRadius.addEventListener('input',()=>{borderRadiusVal.textContent=borderRadius.value+'px';renderPreview();renderCode();}); gap.addEventListener('input',()=>{gapVal.textContent=gap.value+'px';renderPreview();renderCode();}); document.querySelectorAll('.tab-btn').forEach(el=>{el.addEventListener('click',function(){document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));this.classList.add('active');currentTab=this.dataset.tab;renderCode();});}); document.getElementById('copyBtn').addEventListener('click',function(){navigator.clipboard.writeText(code.textContent).then(()=>showToast('Copied ✓')).catch(()=>{const r=document.createRange();r.selectNode(code);window.getSelection().removeAllRanges();window.getSelection().addRange(r);document.execCommand('copy');showToast('Copied ✓');});}); document.getElementById('resetBtn').addEventListener('click',function(){items=[{title:'What is an Accordion Component?',content:'An accordion is a vertically stacked list of collapsible panels.',open:true},{title:'How to Use This Generator?',content:'Copy the generated HTML and CSS into your project.',open:false},{title:'Customization Options?',content:'Adjust panel count, accent color, border radius, spacing, and edit panel content.',open:false}];itemCount.value=3;itemCountVal.textContent='3';mode.value='single';accentColor.value='#06b6d4';borderRadius.value=8;borderRadiusVal.textContent='8px';gap.value=4;gapVal.textContent='4px';render();showToast('Reset ✓');}); function showToast(m){const t=document.getElementById('toast');t.textContent=m;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2000);} sync();

📂 HTML Accordion Generator