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.

<x-accordion>
    <x-accordion.item>
        <x-accordion.heading>What's your refund policy?</x-accordion.heading>
 
        <x-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.
        </x-accordion.content>
    </x-accordion.item>
 
    <x-accordion.item>
        <x-accordion.heading>Do you offer any discounts for bulk
            purchases?</x-accordion.heading>
 
        <x-accordion.content>
            Yes, we offer special discounts for bulk orders. Please reach out to our sales team
            with your requirements.
        </x-accordion.content>
    </x-accordion.item>
 
    <x-accordion.item>
        <x-accordion.heading>How do I track my order?</x-accordion.heading>
 
        <x-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.
        </x-accordion.content>
    </x-accordion.item>
</x-accordion>

Shorthand

You can save on markup by passing the


    heading

text as a prop directly.

<x-accordion.item heading="What's your refund policy?">
    If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please
    contact our support team for assistance.
</x-accordion.item>

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.

<x-accordion transition>
    ...
</x-accordion>

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.

<x-accordion.item expanded>
    ...
</x-accordion.item>