Collapse and accordion
A collapse is a block that shows only its title, and its content opens on click. Several such blocks where only one is open at a time are called an accordion. The LearnUp landing page uses this for its FAQ section.
A collapsible block
The component is collapse, its parts are collapse-title and collapse-content. To make the block remember its state, put an <input type="checkbox"> first inside it: it is invisible and stretched over the whole title.
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="collapse border border-base-300 bg-base-100">
<input type="checkbox">
<div class="collapse-title font-semibold">Do I need programming experience?</div>
<div class="collapse-content text-sm">
No. "HTML basics" is designed for people starting from zero.
</div>
</div>Click the question — the answer appears under it, and a second click hides it.
Arrow and plus
The collapse-arrow and collapse-plus modifiers add an icon on the right that rotates or turns into a minus when the block opens. Instead of a checkbox you can use the <details> and <summary> tags — then collapse-title goes on the <summary>:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<details class="collapse collapse-arrow border border-base-300 bg-base-100">
<summary class="collapse-title font-semibold">How long does a course take?</summary>
<div class="collapse-content text-sm">
About 4 weeks on average, but all lessons are open at once and you choose the pace.
</div>
</details>There is a down arrow to the right of the question; when the block opens it turns up. The open attribute on <details> makes the block open from the start.
Accordion
An accordion is made of blocks with radio buttons instead of checkboxes. The radio buttons share a name, so opening one block closes the previous one. The join join-vertical wrapper glues the blocks into one column, and each block gets join-item:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="join join-vertical w-full bg-base-100">
<div class="collapse collapse-arrow join-item border border-base-300">
<input type="radio" name="faq" checked>
<div class="collapse-title font-semibold">How do I pay for a course?</div>
<div class="collapse-content text-sm">By card on the course page, in dollars or euros.</div>
</div>
<div class="collapse collapse-arrow join-item border border-base-300">
<input type="radio" name="faq">
<div class="collapse-title font-semibold">Is there a certificate?</div>
<div class="collapse-content text-sm">Yes, after you complete all the tasks.</div>
</div>
<div class="collapse collapse-arrow join-item border border-base-300">
<input type="radio" name="faq">
<div class="collapse-title font-semibold">Can I get a refund?</div>
<div class="collapse-content text-sm">Yes, within 14 days.</div>
</div>
</div>Three questions as one block, the first one open. Open the second — the first closes by itself. join is a separate daisyUI component: it removes the rounding where items meet so they look like one piece.
| Approach | Behavior |
|---|---|
A checkbox or <details> | Blocks open independently |
Radio buttons with a shared name | Only one block is open |
Common mistake
Giving the accordion's radio buttons different names — say, faq-1, faq-2, faq-3. Each radio button then ends up in its own group: the blocks open, but none of them ever closes again. The radio buttons of one accordion must share the same name, and a second accordion on the page needs a different one.