Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Icewall
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Arnold Schwarzenegger
arnoldschwarzenegger@left4code.com
Kevin Spacey
kevinspacey@left4code.com
Tom Cruise
tomcruise@left4code.com
Brad Pitt
bradpitt@left4code.com
Products
Sony A7 III
Photography
Dell XPS 13
PC & Laptop
Samsung Galaxy S20 Ultra
Smartphone & Tablet
Sony Master Series A9G
Electronic

## Accordion

## Basic Accordion

Show example code
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

## Boxed Accordion

Show example code
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