Accorditon

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

There are about 25+ styles for Accordion, depending on each individual project we have different styles.


Example

Business is what you're offered four times a year by designers and style is what you choose. The key to style is learning who you are which takes years.

Business is what you're offered four times a year by designers and style is what you choose. The key to style is learning who you are which takes years.

Business is what you're offered four times a year by designers and style is what you choose. The key to style is learning who you are which takes years.

                
<section class="accounting-service-about-section-4 position-relative overflow-hidden">
    <div class="container position-relative">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <div class="accordion">
                    <div class="px-0 card border-0 mb-3 collapse-custom" data-aos="fade-up" data-aos-delay="0">
                        <div class="p-0 card-header border-0 rounded-3">
                            <a class="p-5 fw-bold d-flex align-items-center" data-bs-toggle="collapse" href="#collapse-1">
                                <h6 class="text-dark fs-20 mb-0">How to develop a wesbite?</h6>
                                <span class="ms-auto arrow"></span>
                            </a>
                        </div>
                        <div id="collapse-1" class="collapse show" data-bs-parent=".accordion">
                            <p class="px-5 fs-6 fw-regular">Business is what you're offered four times a year by designers and style is what you choose. The key to style is learning who you are which takes years.</p>
                        </div>
                    </div>
                    <div class="px-0 card border-0 mb-3 collapse-custom" data-aos="fade-up" data-aos-delay="200">
                        <div class="p-0 card-header border-0 rounded-3">
                            <a class="collapsed p-5 pb-3 fw-bold d-flex align-items-center" data-bs-toggle="collapse" href="#collapse-2">
                                <h6 class="text-dark fs-20 mb-0">How can I got componants?</h6>
                                <span class="ms-auto arrow"></span>
                            </a>
                        </div>
                        <div id="collapse-2" class="collapse" data-bs-parent=".accordion">
                            <p class="px-5 fs-6 fw-regular">Business is what you're offered four times a year by designers and style is what you choose. The key to style is learning who you are which takes years.</p>
                        </div>
                    </div>
                    <div class="px-0 card border-0 mb-3 collapse-custom" data-aos="fade-up" data-aos-delay="400">
                        <div class="p-0 card-header border-0 rounded-3">
                            <a class="collapsed p-5 fw-bold d-flex align-items-center" data-bs-toggle="collapse" href="#collapse-3">
                                <h6 class="text-dark fs-20 mb-0">Where I can get free videos?</span></h6>
                                <span class="ms-auto arrow"></span>
                            </a>
                        </div>
                        <div id="collapse-3" class="collapse" data-bs-parent=".accordion">
                            <p class="px-5 fs-6 fw-regular">Business is what you're offered four times a year by designers and style is what you choose. The key to style is learning who you are which takes years.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>