Accordion

<div class="accordion-1">
    <div class="container">
        <h2>Accordion Style 1</h2>
        <div class="accordion accordion-style-1" id="accordionExample">
            <div class="item">
                <div class="icon">
                    <span>1</span>
                </div>
                <h3 class="accordion-header" id="headingOne">
                    <button type="button" class="collapsed" data-bs-toggle="collapse" data-bs-target="#One" aria-expanded="false" aria-controls="One">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore?
                        <div class="arrow-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="19.6" viewBox="0 0 35 19.6">
                                <path data-name="Icon ionic-ios-arrow-forward" d="M24.938,23.69,11.966,10.456a2.528,2.528,0,0,1,0-3.533,2.434,2.434,0,0,1,3.47,0l14.7,15a2.535,2.535,0,0,1,.071,3.449l-14.758,15.1a2.428,2.428,0,0,1-3.47,0,2.528,2.528,0,0,1,0-3.533Z" transform="translate(41.195 -11.247) rotate(90)" fill="#FFF"></path>
                            </svg>
                        </div>
                    </button>
                </h3>
                <div id="One" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
                    <p>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive
                        quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt
                        mollitia animi, id est laborum et dolorum fuga.
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="icon">
                    <span>2</span>
                </div>
                <h3 class="accordion-header" id="headingOne">
                    <button type="button" class="collapsed" data-bs-toggle="collapse" data-bs-target="#Two" aria-expanded="false" aria-controls="Two">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore?
                        <div class="arrow-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="19.6" viewBox="0 0 35 19.6">
                                <path data-name="Icon ionic-ios-arrow-forward" d="M24.938,23.69,11.966,10.456a2.528,2.528,0,0,1,0-3.533,2.434,2.434,0,0,1,3.47,0l14.7,15a2.535,2.535,0,0,1,.071,3.449l-14.758,15.1a2.428,2.428,0,0,1-3.47,0,2.528,2.528,0,0,1,0-3.533Z" transform="translate(41.195 -11.247) rotate(90)" fill="#FFF"></path>
                            </svg>
                        </div>
                    </button>
                </h3>
                <div id="Two" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
                    <p>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive
                        quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt
                        mollitia animi, id est laborum et dolorum fuga.
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="icon">
                    <span>3</span>
                </div>
                <h3 class="accordion-header" id="headingOne">
                    <button type="button" class="collapsed" data-bs-toggle="collapse" data-bs-target="#Three" aria-expanded="true" aria-controls="Three">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore?
                        <div class="arrow-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="19.6" viewBox="0 0 35 19.6">
                                <path data-name="Icon ionic-ios-arrow-forward" d="M24.938,23.69,11.966,10.456a2.528,2.528,0,0,1,0-3.533,2.434,2.434,0,0,1,3.47,0l14.7,15a2.535,2.535,0,0,1,.071,3.449l-14.758,15.1a2.428,2.428,0,0,1-3.47,0,2.528,2.528,0,0,1,0-3.533Z" transform="translate(41.195 -11.247) rotate(90)" fill="#FFF"></path>
                            </svg>
                        </div>
                    </button>
                </h3>
                <div id="Three" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <p>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive
                        quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt
                        mollitia animi, id est laborum et dolorum fuga.
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="icon">
                    <span>4</span>
                </div>
                <h3 class="accordion-header" id="headingOne">
                    <button type="button" class="collapsed" data-bs-toggle="collapse" data-bs-target="#Four" aria-expanded="true" aria-controls="Four">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore?
                        <div class="arrow-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="19.6" viewBox="0 0 35 19.6">
                                <path data-name="Icon ionic-ios-arrow-forward" d="M24.938,23.69,11.966,10.456a2.528,2.528,0,0,1,0-3.533,2.434,2.434,0,0,1,3.47,0l14.7,15a2.535,2.535,0,0,1,.071,3.449l-14.758,15.1a2.428,2.428,0,0,1-3.47,0,2.528,2.528,0,0,1,0-3.533Z" transform="translate(41.195 -11.247) rotate(90)" fill="#FFF"></path>
                            </svg>
                        </div>
                    </button>
                </h3>
                <div id="Four" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <p>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive
                        quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt
                        mollitia animi, id est laborum et dolorum fuga.
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="icon">
                    <span>5</span>
                </div>
                <h3 class="accordion-header" id="headingOne">
                    <button type="button" class="collapsed" data-bs-toggle="collapse" data-bs-target="#Five" aria-expanded="true" aria-controls="Five">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore?
                        <div class="arrow-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="19.6" viewBox="0 0 35 19.6">
                                <path data-name="Icon ionic-ios-arrow-forward" d="M24.938,23.69,11.966,10.456a2.528,2.528,0,0,1,0-3.533,2.434,2.434,0,0,1,3.47,0l14.7,15a2.535,2.535,0,0,1,.071,3.449l-14.758,15.1a2.428,2.428,0,0,1-3.47,0,2.528,2.528,0,0,1,0-3.533Z" transform="translate(41.195 -11.247) rotate(90)" fill="#FFF"></path>
                            </svg>
                        </div>
                    </button>
                </h3>
                <div id="Five" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <p>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive
                        quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt
                        mollitia animi, id est laborum et dolorum fuga.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
Copy to clipboard

    <section class="accordions dt-section">
    <div class="accordion-2">
        <div class="container">
            <h2>Accordion Style 2</h2>
            <div class="accordion accordion-style-2" id="accordionExample">
                <div class="item">
                    <h3 class="accordion-header" id="headingOne">
                        <button type="button" class="collapsed" data-bs-toggle="collapse" data-bs-target="#One" aria-expanded="false" aria-controls="One">
                            <span>1.</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ?
                        </button>
                    </h3>
                    <div id="One" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <p>
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt mollitia animi, id est laborum et dolorum fuga.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <h3 class="accordion-header" id="headingOne">
                        <button type="button" class="collapsed" data-bs-toggle="collapse" data-bs-target="#Two" aria-expanded="false" aria-controls="Two">
                            <span>2.</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ?
                        </button>
                    </h3>
                    <div id="Two" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
                        <p>
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt mollitia animi, id est laborum et dolorum fuga.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <h3 class="accordion-header" id="headingOne">
                        <button type="button" class="collapsed" data-bs-toggle="collapse" data-bs-target="#Three" aria-expanded="false" aria-controls="Three">
                            <span>3.</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ?
                        </button>
                    </h3>
                    <div id="Three" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
                        <p>
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt mollitia animi, id est laborum et dolorum fuga.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <h3 class="accordion-header" id="headingOne">
                        <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Four" aria-expanded="true" aria-controls="Four">
                            <span>4.</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ?
                        </button>
                    </h3>
                    <div id="Four" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
                        <p>
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt mollitia animi, id est laborum et dolorum fuga.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <h3 class="accordion-header" id="headingOne">
                        <button type="button" class="collapsed" data-bs-toggle="collapse" data-bs-target="#Five" aria-expanded="true" aria-controls="Five">
                            <span>5.</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ?
                        </button>
                    </h3>
                    <div id="Five" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <p>
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atqeue corruptive quos dolores etq uas molestias exce pturi sint occaecati cupiditate non provident, similique sunt in culpa qui ocia deserunt mollitia animi, id est laborum et dolorum fuga.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
Copy to clipboard