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

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 border-base-300">
  <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 border-base-300">
  <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 border-base-300">
  <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 border-base-300">
  <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 border-base-300">
  <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 border-base-300">
  <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>
Using <details> tag, we can't have animations because <details> tag doesn't allow CSS transitions.

With 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 border-base-300 bg-base-100 border 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 border-base-300 bg-base-100 border 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 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 border-base-300 bg-base-100 border 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 border-base-300 bg-base-100 border 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 border-base-300 bg-base-100 border 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 border-base-300 bg-base-100 border 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>

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 border-base-300 bg-base-100 border 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 border-base-300 bg-base-100 border 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 border-base-300 bg-base-100 border 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 border-base-300 bg-base-100 border 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
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
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 border-base-300 collapse">
  <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 border-base-300 collapse">
  <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 the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser