Accordion

Basic Usage

Yes! We provide special pricing for large orders.

Once your order ships, you'll receive a tracking number via email.

Absolutely! We offer gift wrapping for a small fee.

<c-ui.accordion>
    <c-ui.accordion.item header="Do you offer bulk discounts?">
        Yes! We provide special pricing for large orders.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="How can I track my order?">
        Once your order ships, you'll receive a tracking number via email.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="Do you offer gift wrapping services?">
        Absolutely! We offer gift wrapping for a small fee.
    </c-ui.accordion.item>
</c-ui.accordion>

{% cotton ui.accordion %}
    {% cotton ui.accordion.item header="Do you offer bulk discounts?" %}
        Yes! We provide special pricing for large orders.
    {% endcotton %}
    {% cotton ui.accordion.item header="How can I track my order?" %}
        Once your order ships, you'll receive a tracking number via email.
    {% endcotton %}
    {% cotton ui.accordion.item header="Do you offer gift wrapping services?" %}
        Absolutely! We offer gift wrapping for a small fee.
    {% endcotton %}
{% endcotton %}

Multiple

Permit more than one item to be open at the same time.

By using this service, you agree to our terms and conditions. Please read carefully before proceeding.

We respect your privacy and will never share your personal information with third parties.

We are a team dedicated to building beautiful, accessible UI components for Django developers.

<c-ui.accordion type="multiple">
    <c-ui.accordion.item header="Terms &amp; Conditions">
        By using this service, you agree to our terms and conditions. Please read carefully before proceeding.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="Privacy Notice">
        We respect your privacy and will never share your personal information with third parties.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="About us">
        We are a team dedicated to building beautiful, accessible UI components for Django developers.
    </c-ui.accordion.item>
</c-ui.accordion>

{% cotton ui.accordion type="multiple" %}
    {% cotton ui.accordion.item header="Terms &amp; Conditions" %}
        By using this service, you agree to our terms and conditions. Please read carefully before proceeding.
    {% endcotton %}
    {% cotton ui.accordion.item header="Privacy Notice" %}
        We respect your privacy and will never share your personal information with third parties.
    {% endcotton %}
    {% cotton ui.accordion.item header="About us" %}
        We are a team dedicated to building beautiful, accessible UI components for Django developers.
    {% endcotton %}
{% endcotton %}

Expanded

Define which items are initially open using the expanded attribute.

Please review your information and click submit to complete the process.

<c-ui.accordion>
    <c-ui.accordion.item header="Step 1: Enter Details">
        <c-ui.input type="text" name="name" placeholder="Your name" class="w-full mb-3" />
        <c-ui.input type="email" name="email" placeholder="Email address" class="w-full" />
    </c-ui.accordion.item>
    <c-ui.accordion.item header="Step 2: Review & Submit" expanded>
        <p>Please review your information and click submit to complete the process.</p>
    </c-ui.accordion.item>
</c-ui.accordion>

{% cotton ui.accordion %}
    {% cotton ui.accordion.item header="Step 1: Enter Details" %}
        {% cotton ui.input type="text" name="name" placeholder="Your name" class="w-full mb-3" /%}
        {% cotton ui.input type="email" name="email" placeholder="Email address" class="w-full" /%}
    {% endcotton %}
    {% cotton ui.accordion.item header="Step 2: Review & Submit" expanded %}
        <p>Please review your information and click submit to complete the process.</p>
    {% endcotton %}
{% endcotton %}

Disabled

Disable individual accordion items with disabled.

All features are accessible and ready to use in your current plan.

These features require a premium subscription. Upgrade to unlock.

These experimental features are coming soon. Stay tuned!

<c-ui.accordion>
    <c-ui.accordion.item header="Available Features">
        All features are accessible and ready to use in your current plan.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="Premium Features" disabled>
        These features require a premium subscription. Upgrade to unlock.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="Beta Features" disabled>
        These experimental features are coming soon. Stay tuned!
    </c-ui.accordion.item>
</c-ui.accordion>

{% cotton ui.accordion %}
    {% cotton ui.accordion.item header="Available Features" %}
        All features are accessible and ready to use in your current plan.
    {% endcotton %}
    {% cotton ui.accordion.item header="Premium Features" disabled %}
        These features require a premium subscription. Upgrade to unlock.
    {% endcotton %}
    {% cotton ui.accordion.item header="Beta Features" disabled %}
        These experimental features are coming soon. Stay tuned!
    {% endcotton %}
{% endcotton %}

Icon Position

Control where the chevron appears using icon_position="leading" to place it before the header text.

Enable two-factor authentication and manage your security preferences here.

Choose which notifications you want to receive via email, SMS, or push.

Manage who can see your profile and activity on the platform.

<c-ui.accordion>
    <c-ui.accordion.item header="Security Settings" icon_position="leading">
        Enable two-factor authentication and manage your security preferences here.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="Notification Preferences" icon_position="leading">
        Choose which notifications you want to receive via email, SMS, or push.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="Privacy Controls" icon_position="leading">
        Manage who can see your profile and activity on the platform.
    </c-ui.accordion.item>
</c-ui.accordion>

{% cotton ui.accordion %}
    {% cotton ui.accordion.item header="Security Settings" icon_position="leading" %}
        Enable two-factor authentication and manage your security preferences here.
    {% endcotton %}
    {% cotton ui.accordion.item header="Notification Preferences" icon_position="leading" %}
        Choose which notifications you want to receive via email, SMS, or push.
    {% endcotton %}
    {% cotton ui.accordion.item header="Privacy Controls" icon_position="leading" %}
        Manage who can see your profile and activity on the platform.
    {% endcotton %}
{% endcotton %}

Custom Icon

Use different icons for closed and open states with icon_closed and icon_open slots.

The icon changes from a plus to a minus when expanded, providing clear visual feedback about the accordion state.

This pattern works well for FAQ sections where users expect clear open/close indicators.

Both icons automatically respect the accent color setting for consistent theming.

<c-ui.accordion>
    <c-ui.accordion.item header="Expand for details">
        <c-slot name="icon_closed">
            <c-heroicon.plus class="size-5" />
        </c-slot>
        <c-slot name="icon_open">
            <c-heroicon.minus class="size-5" />
        </c-slot>
        The icon changes from a plus to a minus when expanded, providing clear visual feedback about the accordion state.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="Click to reveal more">
        <c-slot name="icon_closed">
            <c-heroicon.plus class="size-5" />
        </c-slot>
        <c-slot name="icon_open">
            <c-heroicon.minus class="size-5" />
        </c-slot>
        This pattern works well for FAQ sections where users expect clear open/close indicators.
    </c-ui.accordion.item>
    <c-ui.accordion.item header="Additional information">
        <c-slot name="icon_closed">
            <c-heroicon.plus class="size-5" />
        </c-slot>
        <c-slot name="icon_open">
            <c-heroicon.minus class="size-5" />
        </c-slot>
        Both icons automatically respect the accent color setting for consistent theming.
    </c-ui.accordion.item>
</c-ui.accordion>

{% cotton ui.accordion %}
    {% cotton ui.accordion.item header="Expand for details" %}
        {% cotton:slot icon_closed %}
            {% cotton heroicon.plus class="size-5" /%}
        {% endcotton:slot %}
        {% cotton:slot icon_open %}
            {% cotton heroicon.minus class="size-5" /%}
        {% endcotton:slot %}
        The icon changes from a plus to a minus when expanded, providing clear visual feedback about the accordion state.
    {% endcotton %}
    {% cotton ui.accordion.item header="Click to reveal more" %}
        {% cotton:slot icon_closed %}
            {% cotton heroicon.plus class="size-5" /%}
        {% endcotton:slot %}
        {% cotton:slot icon_open %}
            {% cotton heroicon.minus class="size-5" /%}
        {% endcotton:slot %}
        This pattern works well for FAQ sections where users expect clear open/close indicators.
    {% endcotton %}
    {% cotton ui.accordion.item header="Additional information" %}
        {% cotton:slot icon_closed %}
            {% cotton heroicon.plus class="size-5" /%}
        {% endcotton:slot %}
        {% cotton:slot icon_open %}
            {% cotton heroicon.minus class="size-5" /%}
        {% endcotton:slot %}
        Both icons automatically respect the accent color setting for consistent theming.
    {% endcotton %}
{% endcotton %}

In a card

Rows are flush by default and take their horizontal padding from each item, so the accordion drops cleanly into a card. Give the card padding="none" for an edge-to-edge body, then match each item's px-* to the card.

We offer monthly and annual plans, charged at the start of each cycle. You can cancel anytime, and every plan includes automatic backups and 24/7 support.

Yes. We use end-to-end encryption and regular third-party audits, with all data encrypted at rest and in transit.

We integrate with hundreds of popular tools and expose a REST API plus webhooks for anything custom.

<c-ui.card variant="outline" padding="none">
    <c-ui.accordion>
        <c-ui.accordion.item class="px-4" header="How does billing work?">
            We offer monthly and annual plans, charged at the start of each cycle.
        </c-ui.accordion.item>
        <c-ui.accordion.item class="px-4" header="Is my data secure?">
            Yes. We use end-to-end encryption and regular third-party audits.
        </c-ui.accordion.item>
    </c-ui.accordion>
</c-ui.card>

{% cotton ui.card variant="outline" padding="none" %}
    {% cotton ui.accordion %}
        {% cotton ui.accordion.item class="px-4" header="How does billing work?" %}
            We offer monthly and annual plans, charged at the start of each cycle.
        {% endcotton %}
        {% cotton ui.accordion.item class="px-4" header="Is my data secure?" %}
            Yes. We use end-to-end encryption and regular third-party audits.
        {% endcotton %}
    {% endcotton %}
{% endcotton %}

The same flush rows drop straight into a titled card. Use padding="none" for an edge-to-edge body, pass the card a title and subheading, and match the items' padding to the card header.

Frequently asked questions

Billing and plans

Accounts are invoiced monthly on their signup anniversary. Usage above your plan is billed at the end of the cycle.

Seats added partway through a cycle are prorated automatically, so you only pay for the days you use them.

Annual plans include two months free over paying monthly, billed once a year.

<c-ui.card padding="none" class="overflow-hidden"
    title="Frequently asked questions"
    subheading="Billing and plans">
    <c-ui.accordion>
        <c-ui.accordion.item class="px-6" header="How is billing calculated?">
            Accounts are invoiced monthly on their signup anniversary.
        </c-ui.accordion.item>
        <c-ui.accordion.item class="px-6" header="Can I add seats mid-cycle?">
            Seats added partway through a cycle are prorated automatically.
        </c-ui.accordion.item>
    </c-ui.accordion>
</c-ui.card>

{% cotton ui.card
    padding="none"
    class="overflow-hidden"
    title="Frequently asked questions"
    subheading="Billing and plans"
%}
    {% cotton ui.accordion %}
        {% cotton ui.accordion.item class="px-6" header="How is billing calculated?" %}
            Accounts are invoiced monthly on their signup anniversary.
        {% endcotton %}
        {% cotton ui.accordion.item class="px-6" header="Can I add seats mid-cycle?" %}
            Seats added partway through a cycle are prorated automatically.
        {% endcotton %}
    {% endcotton %}
{% endcotton %}

API Reference

Accordion Props

Name	Description	Type	Options	Default
`type`	Whether one or more items can be expanded at the same time.	str	`singlemultiple`	single
`:collapsible`	Enforce if one item must remain open at all times.	bool	`TrueFalse`	True
`:disabled`	Prevents any interaction with the accordion.	bool	`TrueFalse`	False

Accordion Item Props

Name	Description	Type	Options	Default
`header`	Text for the accordion trigger button (header).	str	—
`icon_position`	Position of the chevron icon relative to the header text.	str	`trailingleading`	trailing
`:expanded`	Whether this item is initially expanded.	bool	`TrueFalse`	False
`:disabled`	Whether this item is disabled and cannot be interacted with.	bool	`TrueFalse`	False
`:accent`	Whether to use accent colors for the chevron icon.	bool	`TrueFalse`	True

Accordion Item Slots

Name	Description	Type	Options
`slot (default)`	The collapsible content that appears when the accordion item is expanded.	—	—
`icon_closed`	Custom icon to display when the accordion item is closed. Overrides the default chevron.	—	—
`icon_open`	Custom icon to display when the accordion item is open. Overrides the default chevron.	—	—

Collapsible content panels that save space while keeping information accessible.