Collapse and expand sections of content. Perfect for FAQs and content-heavy areas.
<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>You can save on markup by passing the heading text as a prop directly.
<flux: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.</flux:accordion.item>Enable expanding transitions for smoother interactions.
<flux:accordion transition> <!-- ... --></flux:accordion>Restrict an accordion item from being expanded.
<flux:accordion.item disabled> <!-- ... --></flux:accordion.item>Enforce that only a single accordion item is expanded at a time.
<flux:accordion exclusive> <!-- ... --></flux:accordion>Expand a specific accordion by default.
<flux:accordion.item expanded> <!-- ... --></flux:accordion.item>