Accordion
- Home
- Accordion
<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">
<h4>Lorem ipsum amet consectetur adipiscing elit?</h4>
<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>
</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">
<h4>Ut enim ad minim veniam, quisa nostrud?</h4>
<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>
</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">
<h4>Donec enim nunc, dapibus nec metus vel porta?</h4>
<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>
</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 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">
<h4>Nam libero tempore, cum soluta nobis est eligendi optio cumque?</h4>
<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>
</a>
</div>
<div class="sub-content collapse" id="accordion2-4">
<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>
<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">
<h3>1. Excepteur sint occaecat cupidatat non sunt in culpa qui official?</h3>
<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>
</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">
<h3>2. Sed ut perspiciatis unde omnis iste natus error sit voluptatem dolore?</h3>
<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>
</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">
<h3>3. At vero eos et accusamus et iusto odio dignissimos ducimu?</h3>
<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>
</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">
<h3>4. Duis aute irure dolor in reprehenderit in voluptate velit esse?</h3>
<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>
</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>