BLUEPRINT
The Official daisyUI Code Generator MCP Server

Collapse

Collapse is used for showing and hiding content.

Class name		Type
collapse
Component
Collapse
collapse-title
Part
Title part
collapse-content
Part
Content part
collapse-arrow
Modifier
Adds arrow icon
collapse-plus
Modifier
Adds plus/minus icon
collapse-open
Modifier
Force open
collapse-close
Modifier
Force close

Also see accordion examples

If you want the collapsed content to be searcheable in browser use the Collapse using details and summary tag

Collapse with focus

This collapse works with focus. When div loses focus, it gets closed
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div tabindex="0" class="$$collapse bg-base-100 border-base-300 border">
  <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 tabindex="0" class="$$collapse bg-base-100 border-base-300 border">
  <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>

Collapse with checkbox

This collapse works with checkbox instead of focus. It needs to get clicked again to get closed.
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div class="$$collapse bg-base-100 border-base-300 border">
  <input type="checkbox" />
  <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 class="$$collapse bg-base-100 border-base-300 border">
  <input type="checkbox" />
  <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>

Collapse using details and summary tag

collapse-open and collapse-close doesn't work with this method. You can add/remove open attribute to the details instead
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<details class="$$collapse bg-base-100 border-base-300 border">
  <summary class="$$collapse-title font-semibold">How do I create an account?</summary>
  <div class="$$collapse-content text-sm">
    Click the "Sign Up" button in the top right corner and follow the registration process.
  </div>
</details>
<details class="$$collapse bg-base-100 border-base-300 border">
  <summary class="$$collapse-title font-semibold">How do I create an account?</summary>
  <div class="$$collapse-content text-sm">
    Click the "Sign Up" button in the top right corner and follow the registration process.
  </div>
</details>

Without border and background color

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div tabindex="0" class="$$collapse">
  <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 tabindex="0" class="$$collapse">
  <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>

With arrow icon

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div tabindex="0" class="$$collapse $$collapse-arrow bg-base-100 border-base-300 border">
  <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 tabindex="0" class="$$collapse $$collapse-arrow bg-base-100 border-base-300 border">
  <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>

With arrow plus/minus icon

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div tabindex="0" class="$$collapse $$collapse-plus bg-base-100 border-base-300 border">
  <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 tabindex="0" class="$$collapse $$collapse-plus bg-base-100 border-base-300 border">
  <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>

Moving collapse icon to the start

We can move the icon using utility classes like after:start-5 after:end-auto and we can customize the padding like pe-4 ps-12
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div tabindex="0" class="$$collapse $$collapse-arrow bg-base-100 border-base-300 border">
  <div class="$$collapse-title font-semibold after:start-5 after:end-auto pe-4 ps-12">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 tabindex="0" class="$$collapse $$collapse-arrow bg-base-100 border-base-300 border">
  <div class="$$collapse-title font-semibold after:start-5 after:end-auto pe-4 ps-12">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>

Force open

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div tabindex="0" class="$$collapse $$collapse-open bg-base-100 border-base-300 border">
  <div class="$$collapse-title font-semibold">I have collapse-open class</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 tabindex="0" class="$$collapse $$collapse-open bg-base-100 border-base-300 border">
  <div class="$$collapse-title font-semibold">I have collapse-open class</div>
  <div class="$$collapse-content text-sm">
    Click the "Sign Up" button in the top right corner and follow the registration process.
  </div>
</div>

Force close

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div tabindex="0" class="$$collapse $$collapse-close bg-base-100 border-base-300 border">
  <div class="$$collapse-title font-semibold">I have collapse-open class</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 tabindex="0" class="$$collapse $$collapse-close bg-base-100 border-base-300 border">
  <div class="$$collapse-title font-semibold">I have collapse-open class</div>
  <div class="$$collapse-content text-sm">
    Click the "Sign Up" button in the top right corner and follow the registration process.
  </div>
</div>

Custom colors for collapse that works with focus

Use Tailwind CSS group and group-focus utilities to apply style when parent div is focused
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div
  tabindex="0"
  class="bg-primary text-primary-content focus:bg-secondary focus:text-secondary-content $$collapse"
>
  <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
  tabindex="0"
  class="bg-primary text-primary-content focus:bg-secondary focus:text-secondary-content $$collapse"
>
  <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>

Custom colors for collapse that works with checkbox

Use Tailwind CSS peer and peer-checked utilities to apply style when sibling checkbox is checked
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<div class="bg-base-100 border-base-300 $$collapse border">
  <input type="checkbox" class="peer" />
  <div
    class="$$collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"
  >
    How do I create an account?
  </div>
  <div
    class="$$collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"
  >
    Click the "Sign Up" button in the top right corner and follow the registration process.
  </div>
</div>
<div class="bg-base-100 border-base-300 $$collapse border">
  <input type="checkbox" class="peer" />
  <div
    class="$$collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"
  >
    How do I create an account?
  </div>
  <div
    class="$$collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"
  >
    Click the "Sign Up" button in the top right corner and follow the registration process.
  </div>
</div>
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details
Please upgrade your browser