Accordion

Collapse and expand sections of content. Perfect for FAQs and content-heavy areas.

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

<flux:accordion>
    <flux:accordion.item>
        <flux:accordion.heading>What's your refund policy?</flux:accordion.heading>

<flux:accordion.content>
            If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.
        </flux:accordion.content>
    </flux:accordion.item>

<flux:accordion.item>
        <flux:accordion.heading>Do you offer any discounts for bulk purchases?</flux:accordion.heading>

<flux:accordion.content>
            Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.
        </flux:accordion.content>
    </flux:accordion.item>

<flux:accordion.item>
        <flux:accordion.heading>How do I track my order?</flux:accordion.heading>

<flux:accordion.content>
            Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.
        </flux:accordion.content>
    </flux:accordion.item>
</flux:accordion>

Shorthand

You can save on markup by passing the heading text as a prop directly.

With transition

Enable expanding transitions for smoother interactions.

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

Disabled

Restrict an accordion item from being expanded.

It all depends how nice you are to me in your email.

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

What do YOU think?

Exclusive

Enforce that only a single accordion item is expanded at a time.

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

Expanded

Expand a specific accordion by default.

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

Built with
by Caleb Porzio and Hugo Sainte-Marie