Django Collapse Component

Preview

What is a collapse component?

A collapse component is an expandable section that reveals or hides content when the user clicks the title area.

Code

<div class="w-full md:w-96">
<c-lb.collapse title="What is a collapse component?" class="bg-base-100 border border-base-300">
    <p class="text-sm">A collapse component is an expandable section that reveals or hides content when the user clicks the title area.</p>
</c-lb.collapse>
</div>

Preview

Click to expand

This collapse uses the arrow icon style. The arrow animates when the section is toggled open or closed.

Code

<div class="w-full md:w-96">
<c-lb.collapse title="Click to expand" style="arrow" class="bg-base-100 border border-base-300">
    <p class="text-sm">This collapse uses the arrow icon style. The arrow animates when the section is toggled open or closed.</p>
</c-lb.collapse>
</div>

Preview

Click to expand

This collapse uses the plus/minus icon style. The icon switches between plus and minus as the section is toggled.

Code

<div class="w-full md:w-96">
<c-lb.collapse title="Click to expand" style="plus" class="bg-base-100 border border-base-300">
    <p class="text-sm">This collapse uses the plus/minus icon style. The icon switches between plus and minus as the section is toggled.</p>
</c-lb.collapse>
</div>

Preview

This section starts open

The open attribute makes the collapse start in the expanded state. Users can still click the title to toggle it closed.

Code

<div class="w-full md:w-96">
<c-lb.collapse title="This section starts open" style="arrow" open class="bg-base-100 border border-base-300">
    <p class="text-sm">The open attribute makes the collapse start in the expanded state. Users can still click the title to toggle it closed.</p>
</c-lb.collapse>
</div>

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
style	arrow plus	-	No	Icon style shown on the collapse title
open	boolean	`False`	No	Whether the collapse is initially open
title	string	-	No	Title text for the collapse header (alternative to title slot)

Slot Name	Description
default	Collapsible content that appears when the collapse is expanded
titleSlot	Custom title content including the collapse-title wrapper (overrides title attribute when provided)

Collapse

Basic Collapse

With Arrow Icon

With Plus/Minus Icon

Initially Open

API Reference

`c-lb.collapse`