daisyUI Accordion Component Documentation

Overview

The Accordion component is used for showing and hiding content, but only one item can stay open at a time. It works with radio inputs where all radio inputs with the same name work together, allowing only one item to be open simultaneously.

Key Features

Only one accordion item can be open at a time
Uses radio inputs for controlling which item is open
Supports different icon styles: arrow, plus/minus
Can be joined together using the join component

Classes and Modifiers

Class name	Type	Description
collapse	Component	Base collapse class
collapse-title	Part	Title part of accordion item
collapse-content	Part	Content part of accordion item
collapse-arrow	Modifier	Adds arrow icon
collapse-plus	Modifier	Adds plus/minus icon
collapse-open	Modifier	Force open accordion item
collapse-close	Modifier	Force close accordion item

Usage Examples

Basic Accordion

<div class="collapse bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" checked="checked" />
  <div class="collapse-title font-semibold">How do I create an account?</div>
  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>

Accordion with Arrow Icon

<div class="collapse collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-2" checked="checked" />
  <div class="collapse-title font-semibold">How do I create an account?</div>
  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>

Accordion with Plus/Minus Icon

<div class="collapse collapse-plus bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-3" checked="checked" />
  <div class="collapse-title font-semibold">How do I create an account?</div>
  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>

Joined Accordion Items

<div class="join join-vertical bg-base-100">
  <div class="collapse collapse-arrow join-item border-base-300 border">
    <input type="radio" name="my-accordion-4" checked="checked" />
    <div class="collapse-title font-semibold">How do I create an account?</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
</div>

Important Notes

All radio inputs with the same name work together to control the accordion behavior
Only one item can be open at a time within the same group
Use different names for radio inputs if you have multiple sets of accordions on the same page
The accordion uses the same styling as the collapse component but with radio input controls

2.9 KiB Raw Permalink Blame History