Accordion

Tailwind CSS and Alpine JS Accordion

Accordions allow you to organize a stack of items that can be expanded or collapsed, revealing or hiding additional content. Accordion examples use the Alpine JS's collapse plugin, which provides a smooth collapse/expand animation. If you prefer not to use this plugin, you can remove the "x-collapse" directive from each item, but you will lose this animation.

Requires Alpine JS

This component requires Alpine JS v3 to function properly. Some advanced features may require additional Alpine plugins (such as focus).

Tell Me More

Default Accordion

Requires Alpine JS Collapse Plugin

Default or always open accordion is an example of an accordion where each item is independent from the others. This means any number of accordion items can be open or closed at the same time.

Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our documentations for more information.
Reach out to our dedicated support team via email at support@example.com or call our toll-free number at 1-800-123-4567 during business hours.
Refer to our refund policy page on the website for detailed information regarding eligibility, timeframes, and the process for requesting a refund.
HTML 
<div class="">
    <div class="">
        <button id="controlsAccordionItemOne" type="button" class="" aria-controls="accordionItemOne">
            What browsers are supported?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne">
            <div class="">
                Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a href="#" class="">documentation</a> for additional information.
            </div>
        </div>
    </div>
    <div class="">
        <button id="controlsAccordionItemTwo" type="button" class="" aria-controls="accordionItemTwo">
            How can I contact customer support?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo">
            <div class="">
                Reach out to our dedicated support team via email at <a href="#" class="">support@example.com</a> or call our toll-free number at 1-800-123-4567 during business hours.
            </div>
        </div>
    </div>
    <div class="">
        <button id="controlsAccordionItemThree" type="button" class="" aria-controls="accordionItemThree">
            What is the refund policy?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemThree" role="region" aria-labelledby="controlsAccordionItemThree">
            <div class="">
                Please refer to our <a href="#" class="">refund policy page</a> on the website for detailed information regarding eligibility, timeframes, and the process for requesting a refund.
            </div>
        </div>
    </div>
</div>

Single Open Accordion

Requires Alpine JS Collapse Plugin

Single or exclusive accordion is an example of an accordion where only one item can be open at a time. Opening a new item will close the previously opened item.

Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our documentations for more information.
Reach out to our dedicated support team via email at support@example.com or call our toll-free number at 1-800-123-4567 during business hours.
Refer to our refund policy page on the website for detailed information regarding eligibility, timeframes, and the process for requesting a refund.
HTML 
<div class="">
    <div class="">
        <button id="controlsAccordionItemOne" type="button" class="" aria-controls="accordionItemOne">
            What browsers are supported?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne">
            <div class="">
                Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a href="#" class="">documentation</a> for additional information.
            </div>
        </div>
    </div>
    <div class="">
        <button id="controlsAccordionItemTwo" type="button" class="" aria-controls="accordionItemTwo">
            How can I contact customer support?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo">
            <div class="">
                Reach out to our dedicated support team via email at <a href="#" class="">support@example.com</a> or call our toll-free number at 1-800-123-4567 during business hours.
            </div>
        </div>
    </div>
    <div class="">
        <button id="controlsAccordionItemThree" type="button" class="" aria-controls="accordionItemThree">
            What is the refund policy?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemThree" role="region" aria-labelledby="controlsAccordionItemThree">
            <div class="">
                Please refer to our <a href="#" class="">refund policy page</a> on the website for detailed information regarding eligibility, timeframes, and the process for requesting a refund.
            </div>
        </div>
    </div>
</div>

Split Accordion

Requires Alpine JS Collapse Plugin

An accordion that presents content in a more organized and divided manner, featuring multiple collapsible sections that you can expand or collapse independently.

Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our documentations for more information.
Reach out to our dedicated support team via email at support@example.com or call our toll-free number at 1-800-123-4567 during business hours.
Refer to our refund policy page on the website for detailed information regarding eligibility, timeframes, and the process for requesting a refund.
HTML 
<div class="">
    <div class="">
        <button id="controlsAccordionItemOne" type="button" class="" aria-controls="accordionItemOne">
            What browsers are supported?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne" >
            <div class="">
                Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a href="#" class="">documentation</a> for additional information.
            </div>
        </div>
    </div>
    <div class="">
        <button id="controlsAccordionItemTwo" type="button" class="" aria-controls="accordionItemTwo">
            How can I contact customer support?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo" >
            <div class="">
                Reach out to our dedicated support team via email at <a href="#" class="">support@example.com</a> or call our toll-free number at 1-800-123-4567 during business hours.
            </div>
        </div>
    </div>
    <div class="">
        <button id="controlsAccordionItemThree" type="button" class="" aria-controls="accordionItemThree">
            What is the refund policy?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemThree" role="region" aria-labelledby="controlsAccordionItemThree" >
            <div class="">
                Please refer to our <a href="#" class="">refund policy page</a> on the website for detailed information regarding eligibility, timeframes, and the process for requesting a refund.
            </div>
        </div>
    </div>
</div>

Accordion with No Background

Requires Alpine JS Collapse Plugin

Also known as a flush accordion, this is an example of an accordion with a minimalist design that seamlessly integrates into the overall aesthetics of your webpage, creating a clean and user-friendly interface.

Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our documentations for more information.
Reach out to our dedicated support team via email at support@example.com or call our toll-free number at 1-800-123-4567 during business hours.
Refer to our refund policy page on the website for detailed information regarding eligibility, timeframes, and the process for requesting a refund.
HTML 
<div class="">
    <div>
        <button id="controlsAccordionItemOne" type="button" class="" aria-controls="accordionItemOne">
            What browsers are supported?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne" >
            <div class="">
                Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a href="#" class="">documentation</a> for additional information.
            </div>
        </div>
    </div>
    <div>
        <button id="controlsAccordionItemTwo" type="button" class="" aria-controls="accordionItemTwo">
            How can I contact customer support?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo" >
            <div class="">
                Reach out to our dedicated support team via email at <a href="#" class="">support@example.com</a> or call our toll-free number at 1-800-123-4567 during business hours.
            </div>
        </div>
    </div>
    <div>
        <button id="controlsAccordionItemThree" type="button" class="" aria-controls="accordionItemThree">
            What is the refund policy?
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </button>
        <div id="accordionItemThree" role="region" aria-labelledby="controlsAccordionItemThree" >
            <div class="">
                Please refer to our <a href="#" class="">refund policy page</a> on the website for detailed information regarding eligibility, timeframes, and the process for requesting a refund.
            </div>
        </div>
    </div>
</div>

Data

List of all Alpine JS data used in this component.

Property Description
isExpanded Boolean - Accordion is expanded/collapsed
selectedAccordionItem String - Selected(Expanded) Accordion

Keyboard Navigation

Key Action
Tab Next focusable element gets the focus
Space Item collapsed: item expands
Item expanded: item collapses