Collapse

Show and hide content inside a collapse.

How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
<x-collapse class="bg-base-100 border-base-300 border" label="How do I create an account?" arrow keep-open>
  Click the "Sign Up" button in the top right corner and follow the registration process.
</x-collapse>

#Collapse indicator

#Indicator types

By default, a collapse is very inconspicuous: it has no background and generally no indication that anything may happen when clicking on it, except for the cursor when the mouse hovers it.

You can use either the arrow or the plus attributes to add an indicator to the collapse, and you can also add a background and/or a border to make it even more clear. If you try to add both attributes, arrow will be the winning one.

A default collapse
There is not much to indicate this is a collapse
Collapse with an arrow
The arrow makes it more clear, and it moves to indicate the collapse is open
Collapse with a plus/minus
The plus/minus work the same way as the arrow.
<x-collapse label="A default collapse">
  There is not much to indicate this is a collapse
</x-collapse>

<x-collapse class="bg-base-100 border-base-300 border" label="Collapse with an arrow" arrow>
  The arrow makes it more clear, and it moves to indicate the collapse is open
</x-collapse>

<x-collapse class="bg-base-100 border-base-300 border" label="Collapse with a plus/minus" plus>
  The plus/minus work the same way as the arrow.
</x-collapse>

#Placing the indicator to the left

Simply add the left attribute to arrow/plus to have the indicator placed to the left. This is especially common for collapsible rows in tables.

Collapse with an arrow
An arrow sometimes makes more sense when placed on the left
Collapse with a plus/minus
The plus/minus behaves like the arrow, even on the left.
<x-collapse class="bg-base-100 border-base-300 border" label="Collapse with an arrow" left arrow>
  An arrow sometimes makes more sense when placed on the left
</x-collapse>

<x-collapse class="bg-base-100 border-base-300 border" label="Collapse with a plus/minus" left plus>
  The plus/minus behaves like the arrow, even on the left.
</x-collapse>

#Auto-close or keep open

Every closed <x-collapse> opens up when you click on it but there are 2 ways it can be closed:

Auto-close collapse
If you click elsewhere, this will close.
Keep-open collapse
You need to click on the collapse again to close it.
<x-collapse class="bg-base-100 border-base-300 border" label="Auto-close collapse" arrow>
  If you click elsewhere, this will close.
</x-collapse>

<x-collapse class="bg-base-100 border-base-300 border" label="Keep-open collapse" arrow keep-open>
  You need to click on the collapse again to close it.
</x-collapse>