Accordion
Basic Accordion

The Basic Accordion component is a powerful and flexible way to organize and present information on your website or application. It allows you to create collapsible sections of content, making it easy for users to access information without overwhelming them with too much text or detail at once.

Example code / preview
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            
                HTMLOpenTagdiv
    data-tw-merge
    class="accordion"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-1"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-1-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-1-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300"
    HTMLCloseTagOpenSSL Essentials: Working with SSL Certificates,
                                                            Private KeysHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-1-collapse"
    aria-labelledby="faq-accordion-1"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible show"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-2"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-2-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-2-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagUnderstanding IP Addresses, Subnets, and CIDR NotationHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-2-collapse"
    aria-labelledby="faq-accordion-2"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-3"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-3-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-3-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagHow To Troubleshoot Common HTTP Error CodesHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-3-collapse"
    aria-labelledby="faq-accordion-3"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-4"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-4-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-4-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagAn Introduction to Securing your Linux VPSHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-4-collapse"
    aria-labelledby="faq-accordion-4"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

Customize the appearance of your accordion sections and panels to match your brand's style and design preferences. Experiment with different content types and layouts to create engaging and user-friendly experiences.

Boxed Accordion

The "Boxed Accordion" component provides a stylish and organized way to create collapsible content sections with a boxed appearance. This variation of the accordion is perfect for presenting information in a structured and visually appealing manner.

Example code / preview
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            
                HTMLOpenTagdiv
    data-tw-merge
    class="accordion"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400 p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-5"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-5-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-5-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300"
    HTMLCloseTagOpenSSL Essentials: Working with SSL Certificates,
                                                            Private KeysHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-5-collapse"
    aria-labelledby="faq-accordion-5"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible show"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400 p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-6"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-6-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-6-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagUnderstanding IP Addresses, Subnets, and CIDR NotationHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-6-collapse"
    aria-labelledby="faq-accordion-6"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400 p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-7"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-7-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-7-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagHow To Troubleshoot Common HTTP Error CodesHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-7-collapse"
    aria-labelledby="faq-accordion-7"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400 p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-8"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-8-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-8-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagAn Introduction to Securing your Linux VPSHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-8-collapse"
    aria-labelledby="faq-accordion-8"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

The Boxed Accordion component offers a visually pleasing way to structure and present content that users can expand and collapse. Customize it to suit your project's needs and enhance the user experience on your website or application. Enjoy using the Boxed Accordion!

Component API

In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.

Below is a list of props that can be passed to the component:

Disclosure
Prop Type Description
No spesific props
Disclosure.Group
Prop Type Description
`as` `string` HTML element or React component type.
`selectedIndex` `number` Currently selected index within the group.
`variant` Variant ('default' or 'boxed') Disclosure group style variant.
Disclosure.Button
Prop Type Description
No spesific props
Disclosure.Panel
Prop Type Description
No spesific props