Accordion

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Example #1

Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex. Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis at.

Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex. Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis at.

Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex. Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis at.

Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex. Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis at.
HTML

  <div class="accordion style-v1" id="accordionFaqs">
    <div class="accordion-item" data-aos="fade-left" data-aos-delay="100">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                How long does it take to start selling online?
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
             data-bs-parent="#accordionFaqs">
            <div class="accordion-body">
                Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo
                malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec
                ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex.
                Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac
                tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis
                at.
            </div>
        </div>
    </div>
    <div class="accordion-item" data-aos="fade-left" data-aos-delay="200">
        <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                What payment methods should I offer to my clients?
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
             data-bs-parent="#accordionFaqs">
            <div class="accordion-body">
                Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo
                malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec
                ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex.
                Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac
                tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis
                at.
            </div>
        </div>
    </div>
    <div class="accordion-item" data-aos="fade-left" data-aos-delay="300">
        <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Do I need a programmer to start accepting online payments?
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
             data-bs-parent="#accordionFaqs">
            <div class="accordion-body">
                Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo
                malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec
                ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex.
                Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac
                tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis
                at.
            </div>
        </div>
    </div>
    <div class="accordion-item" data-aos="fade-left" data-aos-delay="400">
        <h2 class="accordion-header" id="headingFour">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                Do I have to have a business account to accept online payments?
            </button>
        </h2>
        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
             data-bs-parent="#accordionFaqs">
            <div class="accordion-body">
                Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo
                malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec
                ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex.
                Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac
                tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis
                at.
            </div>
        </div>
    </div>
</div>

Example #2

Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex. Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis at.

Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex. Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis at.

Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex. Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis at.

Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex. Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis at.
HTML

<div class="accordion accordion-flush" id="accordionFaqs">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseOne" aria-expanded="true"
                    aria-controls="collapseOne">
                How long does it take to start selling online?
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
             data-bs-parent="#accordionFaqs">
            <div class="accordion-body">
                Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo
                malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec
                ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex.
                Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac
                tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis
                at.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-expanded="false"
                    aria-controls="collapseTwo">
                What payment methods should I offer to my clients?
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
             data-bs-parent="#accordionFaqs">
            <div class="accordion-body">
                Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo
                malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec
                ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex.
                Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac
                tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis
                at.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseThree" aria-expanded="false"
                    aria-controls="collapseThree">
                Do I need a programmer to start accepting online payments?
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse"
             aria-labelledby="headingThree" data-bs-parent="#accordionFaqs">
            <div class="accordion-body">
                Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo
                malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec
                ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex.
                Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac
                tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis
                at.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingFour">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseFour" aria-expanded="false"
                    aria-controls="collapseFour">
                Do I have to have a business account to accept online payments?
            </button>
        </h2>
        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
             data-bs-parent="#accordionFaqs">
            <div class="accordion-body">
                Quisque sit amet turpis et nisl cursus dictum. Donec tristique ligula eget leo
                malesuada tristique. Nunc nisl lacus, ornare eget eleifend eget, dignissim nec
                ex. Nulla tortor risus, dignissim in urna sit amet, vulputate tristique ex.
                Vivamus egestas ipsum nec laoreet vehicula. Nullam vel lacinia urna, ac
                tincidunt elit. Praesent pulvinar tellus sapien, sit amet commodo lacus mollis
                at.
            </div>
        </div>
    </div>
</div>

                            
Color Scheme
  • dark
    primary
  • dark
    primary
  • dark
    primary
  • dark
    primary
  • dark
    primary
  • dark
    primary