Accordion
- Home
- Accordion
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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm dolore
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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm dolore
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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm dolore
<section class="accordion-style dt-section elements">
<div class="container">
<div class="accordion-block">
<h2>Accordion Style 1</h2>
<div id="accordion1" class="accordion1">
<div class="content">
<div class="main-content">
<a class="icon collapsed" data-bs-toggle="collapse" href="#accordion2-1" role="button" aria-expanded="false" aria-controls="accordion2-1">
<div class="svg-wrapper">
<div class="acc1-svg-wrapper">
<div class="svg-wrapp svg-plus">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40146" d="M72.172,0,87.5,15.929,30.978,75,87.5,134.071,72.172,150,0,75Z" transform="translate(0 87.5) rotate(-90)" fill="#1a1725"/>
</svg>
</div>
<div class="svg-wrapp svg-minus d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40148" d="M72.172,150,87.5,134.071,30.978,75,87.5,15.929,72.172,0,0,75Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
</svg>
</div>
</div>
</div>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</h4>
</a>
</div>
<div class="sub-content collapse" id="accordion2-1">
<div class="card card-body">
<p>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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm dolore</p>
</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">
<div class="acc1-svg-wrapper">
<div class="svg-wrapp svg-plus">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40146" d="M72.172,0,87.5,15.929,30.978,75,87.5,134.071,72.172,150,0,75Z" transform="translate(0 87.5) rotate(-90)" fill="#1a1725"/>
</svg>
</div>
<div class="svg-wrapp svg-minus d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40148" d="M72.172,150,87.5,134.071,30.978,75,87.5,15.929,72.172,0,0,75Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
</svg>
</div>
</div>
</div>
<h4>Excepteur sint occaecat cupidatat non proident sunt?</h4>
</a>
</div>
<div class="sub-content collapse" id="accordion2-2">
<div class="card card-body">
<p>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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm dolore</p>
</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">
<div class="acc1-svg-wrapper">
<div class="svg-wrapp svg-plus">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40146" d="M72.172,0,87.5,15.929,30.978,75,87.5,134.071,72.172,150,0,75Z" transform="translate(0 87.5) rotate(-90)" fill="#1a1725"/>
</svg>
</div>
<div class="svg-wrapp svg-minus d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40148" d="M72.172,150,87.5,134.071,30.978,75,87.5,15.929,72.172,0,0,75Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
</svg>
</div>
</div>
</div>
<h4>Sed ut perspiciatis unde omnis iste natus error sit voluptatem?</h4>
</a>
</div>
<div class="sub-content collapse" id="accordion2-3">
<div class="card card-body">
<p>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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm dolore</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
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 aliquip 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
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 aliquip 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
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 aliquip 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
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 aliquip 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
<section class="accordion-style dt-section elements">
<div class="container">
<div class="accordion-block">
<div id="accordion2" class="accordion2">
<h2>Accordion Style 2</h2>
<div class="content">
<div class="main-content">
<a class="icon" data-bs-toggle="collapse" href="#accordion3-1" role="button" aria-expanded="false" aria-controls="accordion3-1">
<div class="svg-wrapper">
<div class="acc1-svg-wrapper">
<div class="svg-wrapp svg-plus">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40146" d="M72.172,0,87.5,15.929,30.978,75,87.5,134.071,72.172,150,0,75Z" transform="translate(0 87.5) rotate(-90)" fill="#1a1725"/>
</svg>
</div>
<div class="svg-wrapp svg-minus d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40148" d="M72.172,150,87.5,134.071,30.978,75,87.5,15.929,72.172,0,0,75Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
</svg>
</div>
</div>
</div>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</h3>
</a>
</div>
<div class="sub-content collapse" id="accordion3-1">
<div class="card card-body">
<p>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 aliquip 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</p>
</div>
</div>
</div>
<div class="content">
<div class="main-content">
<a class="icon collapsed" data-bs-toggle="collapse" href="#accordion3-2" role="button" aria-expanded="false" aria-controls="accordion3-2">
<div class="svg-wrapper">
<div class="acc1-svg-wrapper">
<div class="svg-wrapp svg-plus">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40146" d="M72.172,0,87.5,15.929,30.978,75,87.5,134.071,72.172,150,0,75Z" transform="translate(0 87.5) rotate(-90)" fill="#1a1725"/>
</svg>
</div>
<div class="svg-wrapp svg-minus d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40148" d="M72.172,150,87.5,134.071,30.978,75,87.5,15.929,72.172,0,0,75Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
</svg>
</div>
</div>
</div>
<h3>Excepteur sint occaecat cupidatat non proident sunt?</h3>
</a>
</div>
<div class="sub-content collapse" id="accordion3-2">
<div class="card card-body">
<p>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 aliquip 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</p>
</div>
</div>
</div>
<div class="content">
<div class="main-content">
<a class="icon collapsed" data-bs-toggle="collapse" href="#accordion3-3" role="button" aria-expanded="false" aria-controls="accordion3-2">
<div class="svg-wrapper">
<div class="acc1-svg-wrapper">
<div class="svg-wrapp svg-plus">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40146" d="M72.172,0,87.5,15.929,30.978,75,87.5,134.071,72.172,150,0,75Z" transform="translate(0 87.5) rotate(-90)" fill="#1a1725"/>
</svg>
</div>
<div class="svg-wrapp svg-minus d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40148" d="M72.172,150,87.5,134.071,30.978,75,87.5,15.929,72.172,0,0,75Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
</svg>
</div>
</div>
</div>
<h3>Sed ut perspiciatis unde omnis iste natus error sit voluptatem?</h3>
</a>
</div>
<div class="sub-content collapse" id="accordion3-3">
<div class="card card-body">
<p>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 aliquip 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</p>
</div>
</div>
</div>
<div class="content">
<div class="main-content">
<a class="icon collapsed" data-bs-toggle="collapse" href="#accordion3-4" role="button" aria-expanded="false" aria-controls="accordion3-4">
<div class="svg-wrapper">
<div class="acc1-svg-wrapper">
<div class="svg-wrapp svg-plus">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40146" d="M72.172,0,87.5,15.929,30.978,75,87.5,134.071,72.172,150,0,75Z" transform="translate(0 87.5) rotate(-90)" fill="#1a1725"/>
</svg>
</div>
<div class="svg-wrapp svg-minus d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="87.5" viewBox="0 0 150 87.5">
<path data-name="Path 40148" d="M72.172,150,87.5,134.071,30.978,75,87.5,15.929,72.172,0,0,75Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
</svg>
</div>
</div>
</div>
<h3>At vero eos accusamus etiusto odio dignissimos ducimus?</h3>
</a>
</div>
<div class="sub-content collapse" id="accordion3-4">
<div class="card card-body">
<p>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 aliquip 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</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>