Overview
The Accordion element displays collapsible content sections where only one panel expands at a time. This is ideal for FAQs, feature lists, or any content that benefits from progressive disclosure.
Accordion is powered by Alpine.js for lightweight interactivity — no custom JavaScript is required. The component uses the x-data="{ open: null }" attribute to manage which panel is currently expanded.
By default, the Accordion element has the following styling classes:
divide-y divide-gray-200– Visual separator between panelsborder border-gray-200– Outer borderrounded– Rounded corners
Add accordion-item children to define the expandable panels. Each item contains a trigger (heading or button) and a content area that shows when expanded.
Alpine.js is automatically loaded when interactive elements like Accordion are used on the page. You do not need to add any scripts manually.
Settings
Configure the Accordion element using these Inspector options:
| Setting | Description | Default |
|---|---|---|
| Expand Behavior | Only one panel can be open at a time. The currently open panel closes when another is clicked. This behavior is managed via the x-data state. | Single expand |
| Container Classes | Styling classes for the accordion wrapper. Controls borders, dividers, and rounded corners. | divide-y divide-gray-200 border border-gray-200 rounded |
| Alpine State (x-data) | The x-data attribute controls which panel index is currently open. Set to { open: null } for all panels closed initially, or { open: 0 } to have the first panel open. |
{ open: null } |
Child Elements: accordion-item
Each accordion-item represents a single collapsible panel with the following structure:
- Trigger – A heading or button that users click to expand/collapse the panel
- Content – The expandable area that shows when the trigger is clicked
When clicked, the trigger toggles the open state via Alpine.js. The content area is hidden by default and becomes visible when the item's index matches the open state value.
You can style the open and closed states using conditional classes:
x-show="open === index"– Show content when this item is open- Rotate chevron icons when expanded
- Change background color for the active item
Creating Accordion Items
- Add an Accordion element to the canvas from the Interactive Elements panel
- Drag accordion-item children inside the accordion
- Each item has a heading section (trigger) and a content section
- The content is hidden until the trigger is clicked
- Style each item using the Inspector — add padding, colors, and icons as needed
Examples
FAQ Accordion
A common use case for accordions is displaying frequently asked questions. Each question becomes a trigger, and the answer is the expandable content.
<div x-data="{ open: null }" class="divide-y divide-gray-200 border border-gray-200 rounded">
<!-- Item 1 -->
<div>
<button @click="open = open === 0 ? null : 0" class="w-full flex justify-between items-center p-4 text-left">
<span class="font-medium">What is your return policy?</span>
<svg :class="{ 'rotate-180': open === 0 }" class="w-5 h-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 0" x-collapse class="p-4 pt-0 text-gray-600">
We offer a 30-day money-back guarantee on all products.
</div>
</div>
<!-- Item 2 -->
<div>
<button @click="open = open === 1 ? null : 1" class="w-full flex justify-between items-center p-4 text-left">
<span class="font-medium">How long does shipping take?</span>
<svg :class="{ 'rotate-180': open === 1 }" class="w-5 h-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 1" x-collapse class="p-4 pt-0 text-gray-600">
Standard shipping takes 3-5 business days. Express shipping is available for 1-2 day delivery.
</div>
</div>
<!-- Item 3 -->
<div>
<button @click="open = open === 2 ? null : 2" class="w-full flex justify-between items-center p-4 text-left">
<span class="font-medium">Do you offer international shipping?</span>
<svg :class="{ 'rotate-180': open === 2 }" class="w-5 h-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 2" x-collapse class="p-4 pt-0 text-gray-600">
Yes, we ship to over 50 countries worldwide. Shipping rates vary by location.
</div>
</div>
</div>Accordion with Icons in Headers
Add icons to make accordion headers more visually descriptive.
<div x-data="{ open: 0 }" class="space-y-2">
<div class="border rounded-lg">
<button @click="open = open === 0 ? null : 0" class="w-full flex items-center gap-3 p-4">
<span class="text-blue-500">
<i class="fas fa-credit-card"></i>
</span>
<span class="font-medium">Payment Options</span>
</button>
<div x-show="open === 0" x-collapse class="px-4 pb-4 text-gray-600">
We accept all major credit cards, PayPal, and bank transfers.
</div>
</div>
<div class="border rounded-lg">
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center gap-3 p-4">
<span class="text-green-500">
<i class="fas fa-shield-alt"></i>
</span>
<span class="font-medium">Security & Privacy</span>
</button>
<div x-show="open === 1" x-collapse class="px-4 pb-4 text-gray-600">
Your data is encrypted and never shared with third parties.
</div>
</div>
</div>Styled Accordion with Custom Colors
Customize the accordion appearance by adding background colors and shadows.
<div x-data="{ open: null }" class="space-y-3">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<button @click="open = open === 0 ? null : 0"
:class="{ 'bg-blue-50': open === 0 }"
class="w-full flex justify-between items-center p-4 hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-800">Getting Started</span>
<span class="text-blue-600">+</span>
</button>
<div x-show="open === 0" x-collapse class="p-4 bg-blue-50 text-gray-700">
Follow our quick start guide to set up your first project in minutes.
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<button @click="open = open === 1 ? null : 1"
:class="{ 'bg-blue-50': open === 1 }"
class="w-full flex justify-between items-center p-4 hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-800">Advanced Features</span>
<span class="text-blue-600">+</span>
</button>
<div x-show="open === 1" x-collapse class="p-4 bg-blue-50 text-gray-700">
Explore powerful features like AI assistance, templates, and more.
</div>
</div>
</div>Use the x-collapse directive for smooth height animations when panels open and close. This is provided by the Alpine.js Collapse plugin which is included automatically.