Accordion Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            
<section class="accordion dt-section">
    <div class="container">
        <div class="accordion-block">
            <div id="accordion1" class="accordion1">
                <div class="content">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion1-1" role="button" aria-expanded="false" aria-controls="accordion1-1">
                            <div class="svg-wrapper">
                                <i>
                                <svg class="svg-minus" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
                                    <path  data-name="Path 39777" d="M87.5,15.468,30.715,74.821l56.428,60.43L72.5,150,0,75.539,71.786,0Z" transform="translate(150) rotate(90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                <svg class="svg-plus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" class="__web-inspector-hide-shortcut__">
                                    <path data-name="Path 39776" d="M87.5,134.532,30.715,75.179l56.428-60.43L72.5,0,0,74.461,71.786,150Z" transform="translate(0 87.5) rotate(-90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                </i>
                            </div>
                            <h3>1. Excepteur sint occaecat cupidatat non sunt in culpa qui official?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse show" id="accordion1-1" data-bs-parent="#accordion1">
                        <div class="card card-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                </div>
                    </div>
                </div>
                <div class="content">
                    <div class="main-content">
                        <a class="icon collapsed" data-bs-toggle="collapse" href="#accordion1-2" role="button" aria-expanded="false" aria-controls="accordion1-2">
                            <div class="svg-wrapper">
                                <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
                                    <path  data-name="Path 39777" d="M87.5,15.468,30.715,74.821l56.428,60.43L72.5,150,0,75.539,71.786,0Z" transform="translate(150) rotate(90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                <svg class="svg-plus " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" class="__web-inspector-hide-shortcut__">
                                    <path data-name="Path 39776" d="M87.5,134.532,30.715,75.179l56.428-60.43L72.5,0,0,74.461,71.786,150Z" transform="translate(0 87.5) rotate(-90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                </i>
                            </div>
                            <h3>2. Sed ut perspiciatis unde omnis iste natus error sit voluptatem dolore?</h3> 
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion1-2" data-bs-parent="#accordion1">
                        <div class="card card-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                </div>
                    </div>
                </div>
                <div class="content">
                    <div class="main-content">
                        <a class="icon collapsed" data-bs-toggle="collapse" href="#accordion1-3" role="button" aria-expanded="false" aria-controls="accordion1-3">
                            <div class="svg-wrapper">    
                                <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
                                    <path  data-name="Path 39777" d="M87.5,15.468,30.715,74.821l56.428,60.43L72.5,150,0,75.539,71.786,0Z" transform="translate(150) rotate(90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                <svg class="svg-plus " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" class="__web-inspector-hide-shortcut__">
                                    <path data-name="Path 39776" d="M87.5,134.532,30.715,75.179l56.428-60.43L72.5,0,0,74.461,71.786,150Z" transform="translate(0 87.5) rotate(-90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                </i>
                            </div>
                            <h3>3. At vero eos et accusamus et iusto odio dignissimos ducimu?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion1-3" data-bs-parent="#accordion1">
                        <div class="card card-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                </div>
                    </div>
                </div>
                <div class="content">
                    <div class="main-content">
                        <a class="icon collapsed" data-bs-toggle="collapse" href="#accordion1-4" role="button" aria-expanded="false" aria-controls="accordion1-4">
                            <div class="svg-wrapper">  
                                <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
                                    <path  data-name="Path 39777" d="M87.5,15.468,30.715,74.821l56.428,60.43L72.5,150,0,75.539,71.786,0Z" transform="translate(150) rotate(90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                <svg class="svg-plus " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" class="__web-inspector-hide-shortcut__">
                                    <path data-name="Path 39776" d="M87.5,134.532,30.715,75.179l56.428-60.43L72.5,0,0,74.461,71.786,150Z" transform="translate(0 87.5) rotate(-90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                </i>
                            </div>
                            <h3>4. Duis aute irure dolor in reprehenderit in voluptate velit esse?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion1-4" data-bs-parent="#accordion1">
                        <div class="card card-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                </div>
                    </div>
                </div>
            </div>
        </div>
</div>
                            </section>
                          
                        
                        

Accordion Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat.
                            
<section class="accordion dt-section">
    <div class="container">
        <div class="accordion-block">
            <div id="accordion2" class="accordion2">
                <div class="content">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion2-1" role="button" aria-expanded="false" aria-controls="accordion2-1">
                        <div class="svg-wrapper">
                                <i>
                                <svg class="svg-minus" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
                                    <path  data-name="Path 39777" d="M87.5,15.468,30.715,74.821l56.428,60.43L72.5,150,0,75.539,71.786,0Z" transform="translate(150) rotate(90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                <svg class="svg-plus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" class="__web-inspector-hide-shortcut__">
                                    <path data-name="Path 39776" d="M87.5,134.532,30.715,75.179l56.428-60.43L72.5,0,0,74.461,71.786,150Z" transform="translate(0 87.5) rotate(-90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                </i>
                            </div>
                            <h4>Excepteur sint occaecat cupidatat non sunt in culpa qui official?</h4>
                        </a>
                    </div>
                    <div class="sub-content collapse show" id="accordion2-1">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat.
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="main-content">
                        <a class="icon collapsed" data-bs-toggle="collapse" href="#accordion2-2" role="button" aria-expanded="false" aria-controls="accordion2-2">
                            <div class="svg-wrapper">  
                                <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
                                    <path  data-name="Path 39777" d="M87.5,15.468,30.715,74.821l56.428,60.43L72.5,150,0,75.539,71.786,0Z" transform="translate(150) rotate(90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                <svg class="svg-plus " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" class="__web-inspector-hide-shortcut__">
                                    <path data-name="Path 39776" d="M87.5,134.532,30.715,75.179l56.428-60.43L72.5,0,0,74.461,71.786,150Z" transform="translate(0 87.5) rotate(-90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                </i>
                            </div>
                            <h4>Sed ut perspiciatis unde omnis iste natus error sit voluptatem dolore?</h4>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-2">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat.
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="main-content">
                        <a class="icon collapsed" data-bs-toggle="collapse" href="#accordion2-3" role="button" aria-expanded="false" aria-controls="accordion2-3">
                            <div class="svg-wrapper">  
                                <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
                                    <path  data-name="Path 39777" d="M87.5,15.468,30.715,74.821l56.428,60.43L72.5,150,0,75.539,71.786,0Z" transform="translate(150) rotate(90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                <svg class="svg-plus " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" class="__web-inspector-hide-shortcut__">
                                    <path data-name="Path 39776" d="M87.5,134.532,30.715,75.179l56.428-60.43L72.5,0,0,74.461,71.786,150Z" transform="translate(0 87.5) rotate(-90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                </i>
                            </div>
                            <h4>At vero eos et accusamus et iusto odio dignissimos ducimu?</h4>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-3">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat.
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="main-content">
                        <a class="icon collapsed" data-bs-toggle="collapse" href="#accordion2-4" role="button" aria-expanded="false" aria-controls="accordion2-4">
                            <div class="svg-wrapper">  
                                <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
                                    <path  data-name="Path 39777" d="M87.5,15.468,30.715,74.821l56.428,60.43L72.5,150,0,75.539,71.786,0Z" transform="translate(150) rotate(90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                <svg class="svg-plus " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" class="__web-inspector-hide-shortcut__">
                                    <path data-name="Path 39776" d="M87.5,134.532,30.715,75.179l56.428-60.43L72.5,0,0,74.461,71.786,150Z" transform="translate(0 87.5) rotate(-90)" fill="#1f1f1f" fill-rule="evenodd"/>
                                </svg>
                                </i>
                            </div>
                            <h4>Duis aute irure dolor in reprehenderit in voluptate velit esse?</h4>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-4">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliqup ex ea commodo consequat.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>