Collapsible

Implemented Display

Composable disclosure component for showing and hiding content.

Kumo reference: kumo-ui.com/components/collapsible/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Default

What is wdj?

Server-rendered Django components with HTMX and Alpine.js.

Show template

{% load wdj %}
{% wdj_component "wdj/components/collapsible.html" title="What is wdj?" open=True %}
<p class="text-base">Server-rendered Django components with HTMX and Alpine.js.</p>
{% endwdj_component %}

Closed

What is wdj?

Server-rendered Django components with HTMX and Alpine.js.

Show template

{% load wdj %}
{% wdj_component "wdj/components/collapsible.html" title="What is wdj?" %}
<p class="text-base">Server-rendered Django components with HTMX and Alpine.js.</p>
{% endwdj_component %}

Card

Advanced settings

Server-rendered Django components with HTMX and Alpine.js.

Show template

{% load wdj %}
{% wdj_component "wdj/components/collapsible.html" title="Advanced settings" variant="card" %}
<p class="text-base">Server-rendered Django components with HTMX and Alpine.js.</p>
{% endwdj_component %}

Flush

More details

Server-rendered Django components with HTMX and Alpine.js.

Show template

{% load wdj %}
{% wdj_component "wdj/components/collapsible.html" title="More details" variant="flush" %}
<p class="text-base">Server-rendered Django components with HTMX and Alpine.js.</p>
{% endwdj_component %}

Nested disclosure

Advanced settings

Nested content.

Show template

{% load wdj %}
<div class="grid w-full gap-2">{% wdj_component "wdj/components/collapsible.html" title="Nested disclosure" %}{% wdj_component "wdj/components/collapsible.html" title="Advanced settings" %}<p>Nested content.</p>{% endwdj_component %}{% endwdj_component %}</div>

Rich content

Show template

{% load wdj %}
<div class="grid w-full gap-2">{% wdj_component "wdj/components/collapsible.html" title="Rich content" %}{% include "wdj/components/input.html" with name="collapsible_email" label="Email" type="email" only %}{% include "wdj/components/button.html" with label="Save" only %}{% endwdj_component %}</div>

Grouped sections

Overview settings.

Security settings

Security options.

Show template

{% load wdj %}
<div class="grid w-full gap-2">{% wdj_component "wdj/components/collapsible.html" title="Grouped sections" name="showcase-accordion" %}<p>Overview settings.</p>{% endwdj_component %}{% wdj_component "wdj/components/collapsible.html" title="Security settings" name="showcase-accordion" %}<p>Security options.</p>{% endwdj_component %}</div>

Exclusive accordion

Access

Configure project access.

Activity

Review project activity.

Show template

{% load wdj %}
<div class="flex flex-col gap-2">{% wdj_component "wdj/components/collapsible.html" title="Access" name="audit-exclusive" open=True %}
<p>Configure project access.</p>
{% endwdj_component %}{% wdj_component "wdj/components/collapsible.html" title="Activity" name="audit-exclusive" %}
<p>Review project activity.</p>
{% endwdj_component %}</div>

Form state retained

Draft settings

Draft name

Show template

{% load wdj %}
{% wdj_component "wdj/components/collapsible.html" title="Draft settings" %}
{% include "wdj/components/input.html" with id="audit-retained-field" label="Draft name" value="Unsaved draft" only %}
{% endwdj_component %}

Custom summary

Advanced settings · 3 options

Rich content remains mounted when collapsed.

Show template

{% load wdj %}
{% wdj_component "wdj/components/collapsible.html" title="Advanced settings" trigger="Advanced settings · 3 options" %}
<p>Rich content remains mounted when collapsed.</p>
{% endwdj_component %}

API Reference

Prop	Type	Default	Description
title	string	unset	Title; pass the documented value shown in the examples.
trigger	string / HTML slot	unset	Trigger; pass the documented value shown in the examples.
open	bool	False	Open; pass the documented value shown in the examples.
variant	string	component-specific	Variant; pass the documented value shown in the examples.
name	string	unset	Name; pass the documented value shown in the examples.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract