Accordion | Consultant

Accordion Style 1

Lorem ipsum amet consectetur adipiscing elit?

Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisa nostrud exercitation ullamco laboris

Ut enim ad minim veniam, quisa nostrud?

Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisa nostrud exercitation ullamco laboris

Donec enim nunc, dapibus nec metus vel porta?

Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisa nostrud exercitation ullamco laboris

                            
<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 __web-inspector-hide-shortcut__ d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" >
                                    <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>Lorem ipsum amet consectetur adipiscing elit?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse show" id="accordion2-1">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisa nostrud
                            exercitation ullamco laboris
                        </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 __web-inspector-hide-shortcut__ " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" >
                                    <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>Ut enim ad minim veniam, quisa nostrud?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-2">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisa nostrud
                            exercitation ullamco laboris
                        </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 __web-inspector-hide-shortcut__ " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" >
                                    <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>Donec enim nunc, dapibus nec metus vel porta?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-3">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisa nostrud
                            exercitation ullamco laboris
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Accordion Style 2

1. Excepteur sint occaecat cupidatat non sunt in culpa qui official?

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 exer citation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

                            
<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 __web-inspector-hide-shortcut__ d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" >
                                    <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 exer
                        citation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                        </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 __web-inspector-hide-shortcut__ " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" >
                                    <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 exer
                        citation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                        </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 __web-inspector-hide-shortcut__ " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" >
                                    <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 exer
                        citation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                        </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 __web-inspector-hide-shortcut__ " xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5" >
                                    <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 exer
                        citation ullamco laboris nisi ut aliqup ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>