Accordion

Allows the user to show and hide the visibility of sections of related content on a page.

The accordion component is a group of Collapse component used to toggle the visibility of content. So, it consists of multiple Collapse component.

A popular use case would be the FAQ section of a website when you can toggle the visibility of answers for each question.

Usage #

The accordion component is basically a collection of collapse component with additional group option for each.

This page will only complement the Collapse component, so please check out the Collapse component page for more reference.

First Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

Second Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

Third Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

If you want to open one of the items by default, just set aria-expanded="true" to the toggle element.

First Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

Second Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

Third Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

<div class="divide-y divide-gray-300 divide-dashed">
                                    <div>
                                        <a href="javascript:;" data-collapse-toggle role="button" aria-expanded="true" class="flex w-full items-center justify-between text-lg py-2.5 font-semibold [&[aria-expanded=true]>.icon]:rotate-180">
                                            Accordion Item 1
                                            <i data-icon="feather__chevronDown"></i>
                                        </a>
                                        <div class="collapse" data-collapse-group="basicAccordion">
                                            <div class="prose py-2.5">
                                                <strong>First Accordion Item Content</strong>. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <a href="javascript:;" data-collapse-toggle role="button" aria-expanded="false" class="flex w-full items-center justify-between text-lg py-2.5 font-semibold [&[aria-expanded=true]>.icon]:rotate-180">
                                            Accordion Item 2
                                            <i data-icon="feather__chevronDown"></i>
                                        </a>
                                        <div class="collapse" data-collapse-group="basicAccordion">
                                            <div class="prose py-2.5">
                                                <strong>Second Accordion Item Content</strong>. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>

Examples #

Within a Card #

This is how it looks inside the card component.

First Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

Second Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

Third Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

<div class="card mb-5">
                                    <div class="divide-y">
                                        <div>
                                            <button data-collapse-toggle aria-expanded="true" class="flex w-full items-center justify-between text-lg py-2.5 px-5 font-semibold [&[aria-expanded=true]>.icon]:rotate-180">
                                                Accordion Item 1: Within a Card
                                                <i data-icon="feather__chevronDown" class="transform transition"></i>
                                            </button>
                                            <div class="collapse" data-collapse-group="withinCard">
                                                <div class="prose py-2.5 px-5">
                                                    <strong>First Accordion Item Content</strong>. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.
                                                </div>
                                            </div>
                                        </div>
                                        <div>
                                            <button data-collapse-toggle aria-expanded="false" class="flex w-full items-center justify-between text-lg py-2.5 px-5 font-semibold [&[aria-expanded=true]>.icon]:rotate-180">
                                                Accordion Item 2: Within a Card
                                                <i data-icon="feather__chevronDown"></i>
                                            </button>
                                            <div class="collapse" data-collapse-group="withinCard">
                                                <div class="prose py-2.5 px-5">
                                                    <strong>Second Accordion Item Content</strong>. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>

Separated Card #

This is how it looks when using a separate card component.

First Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

Second Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

Third Accordion Item Content. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

<div class="flex flex-col gap-4 mb-5">
                                <div class="card">
                                    <button data-collapse-toggle aria-expanded="true" class="flex w-full items-center justify-between text-lg py-2.5 px-5 font-semibold [&[aria-expanded=true]>.icon]:rotate-180">
                                        Accordion Item 1: Separated Card
                                        <i data-icon="feather__chevronDown" class="transform transition"></i>
                                    </button>
                                    <div class="collapse" data-collapse-group="separatedCard">
                                        <div class="prose py-2.5 px-5">
                                            <strong>First Accordion Item Content</strong>. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <button data-collapse-toggle aria-expanded="false" class="flex w-full items-center justify-between text-lg py-2.5 px-5 font-semibold [&[aria-expanded=true]>.icon]:rotate-180">
                                        Accordion Item 2: Separated Card
                                        <i data-icon="feather__chevronDown"></i>
                                    </button>
                                    <div class="collapse" data-collapse-group="separatedCard">
                                        <div class="prose py-2.5 px-5">
                                            <strong>Second Accordion Item Content</strong>. Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.
                                        </div>
                                    </div>
                                </div>
                                
                            </div>

Initializing and API #

Since the accordion component uses the Collapse component, you can refer to the Collapse Javascript section.

Messages

Notifications

Accordion

Usage #

Examples #

Within a Card #

Separated Card #

Initializing and API #