Accordion for Django lets you build collapsible content sections using a simple HTML-like syntax. Built on django-cotton, Tailwind CSS, and daisyUI 5, it uses pure CSS checkbox state — no JavaScript required. Use it to create FAQs, expandable detail panels, and nested navigation in any Django template.
Basic Accordion
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.
<div class="w-full md:w-96">
<c-lb.accordion class="flex flex-col gap-2">
<c-lb.accordion.item name="basic-accordion" title="How do I create an account?" checked border class="bg-base-100">
<p class="text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</p>
</c-lb.accordion.item>
<c-lb.accordion.item name="basic-accordion" title="I forgot my password. What should I do?" border class="bg-base-100">
<p class="text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
</c-lb.accordion.item>
<c-lb.accordion.item name="basic-accordion" title="How do I update my profile information?" border class="bg-base-100">
<p class="text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</p>
</c-lb.accordion.item>
</c-lb.accordion>
</div>
Accordion with Arrow Icons
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.
<div class="w-full md:w-96">
<c-lb.accordion class="flex flex-col gap-2">
<c-lb.accordion.item name="arrow-accordion" title="How do I create an account?" checked style="arrow" border class="bg-base-100">
<p class="text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</p>
</c-lb.accordion.item>
<c-lb.accordion.item name="arrow-accordion" title="I forgot my password. What should I do?" style="arrow" border class="bg-base-100">
<p class="text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
</c-lb.accordion.item>
<c-lb.accordion.item name="arrow-accordion" title="How do I update my profile information?" style="arrow" border class="bg-base-100">
<p class="text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</p>
</c-lb.accordion.item>
</c-lb.accordion>
</div>
Accordion with Plus/Minus Icons
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.
<div class="w-full md:w-96">
<c-lb.accordion class="flex flex-col gap-2">
<c-lb.accordion.item name="plus-accordion" title="How do I create an account?" checked style="plus" border class="bg-base-100">
<p class="text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</p>
</c-lb.accordion.item>
<c-lb.accordion.item name="plus-accordion" title="I forgot my password. What should I do?" style="plus" border class="bg-base-100">
<p class="text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
</c-lb.accordion.item>
<c-lb.accordion.item name="plus-accordion" title="How do I update my profile information?" style="plus" border class="bg-base-100">
<p class="text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</p>
</c-lb.accordion.item>
</c-lb.accordion>
</div>
Joined Accordion
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.
<div class="w-full md:w-96">
<c-lb.accordion join class="bg-base-100">
<c-lb.accordion.item name="joined-accordion" title="How do I create an account?" checked join border>
<p class="text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</p>
</c-lb.accordion.item>
<c-lb.accordion.item name="joined-accordion" title="I forgot my password. What should I do?" join border>
<p class="text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
</c-lb.accordion.item>
<c-lb.accordion.item name="joined-accordion" title="How do I update my profile information?" join border>
<p class="text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</p>
</c-lb.accordion.item>
</c-lb.accordion>
</div>
Accordion with Custom Content
User Account
Manage your user account settings and preferences.
Settings
Configure your application settings and preferences.
Help & Support
Get help and support for using the application.
<div class="w-full md:w-96">
<c-lb.accordion class="flex flex-col gap-2">
<c-lb.accordion.item name="custom-accordion" checked border class="bg-base-100">
<c-slot name="titleSlot">
<div class="collapse-title font-semibold flex items-center gap-2">
<c-lbi n="rmx.user" w="1em" h="1em" />
<span>User Account</span>
</div>
</c-slot>
<div class="space-y-2">
<p class="text-sm">Manage your user account settings and preferences.</p>
<div class="flex justify-end">
<c-lb.button variant="primary" size="sm">Edit Profile</c-lb.button>
</div>
</div>
</c-lb.accordion.item>
<c-lb.accordion.item name="custom-accordion" border class="bg-base-100">
<c-slot name="titleSlot">
<div class="collapse-title font-semibold flex items-center gap-2">
<c-lbi n="rmx.settings" w="1em" h="1em" />
<span>Settings</span>
</div>
</c-slot>
<div class="space-y-2">
<p class="text-sm">Configure your application settings and preferences.</p>
<div class="flex justify-end">
<c-lb.button variant="secondary" size="sm">Open Settings</c-lb.button>
</div>
</div>
</c-lb.accordion.item>
<c-lb.accordion.item name="custom-accordion" border class="bg-base-100">
<c-slot name="titleSlot">
<div class="collapse-title font-semibold flex items-center gap-2">
<c-lbi n="rmx.question" w="1em" h="1em" />
<span>Help & Support</span>
</div>
</c-slot>
<div class="space-y-2">
<p class="text-sm">Get help and support for using the application.</p>
<div class="flex justify-end">
<c-lb.button variant="accent" size="sm">Contact Support</c-lb.button>
</div>
</div>
</c-lb.accordion.item>
</c-lb.accordion>
</div>
API Reference
c-lb.accordion
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| join | boolean |
False
|
No | Use joined accordion layout with seamless borders |
| Slot Name | Description |
|---|---|
| default | Accordion content using accordion.item components |
c-lb.accordion.item
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| name | string | - | Yes | Name for the radio input (should match parent accordion name) |
| checked | boolean |
False
|
No | Whether this accordion item is initially open |
| title | string | - | No | Title text for the accordion item |
| style |
arrow
plus
|
- | No | Accordion item style variant |
| join | boolean |
False
|
No | Use joined accordion item layout |
| border | boolean |
False
|
No | Add border styling to accordion item |
| Slot Name | Description |
|---|---|
| default | Accordion item content |
| titleSlot | Custom title content (overrides title attribute) |