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 aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
<div class="accordion-style-1" id="accordionExample">
<div class="item">
<h3 class="accordion-header" id="headingOne">
<button type="button" class="border-style" data-bs-toggle="collapse" data-bs-target="#twoOne"
aria-controls="twoOne" aria-expanded="true">
<span class="ast-1">
<span>01. </span>Excepteur sint occaecat cupidatat non proident sunt in culpa deserunt?
</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="245.454" height="150"
viewBox="0 0 245.454 150">
<path data-name="Icon ionic-ios-arrow-down"
d="M128.96,116.028l92.81-99.275a16.685,16.685,0,0,1,24.774,0,19.844,19.844,0,0,1,0,26.557L141.384,155.785a16.706,16.706,0,0,1-24.189.547L11.3,43.388a19.791,19.791,0,0,1,0-26.557,16.685,16.685,0,0,1,24.774,0Z"
transform="translate(-6.188 -11.247)" fill="#1a1725" />
</svg>
</span>
</button>
</h3>
<div id="twoOne" class="accordion-collapse collapse show" aria-labelledby="twoOne"
data-bs-parent="#accordionExample">
<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.
</p>
</div>
</div>
<div class="item">
<h3 class="accordion-header" id="headingOne">
<button type="button" class="" data-bs-toggle="collapse" data-bs-target="#twoTwo"
aria-controls="twoTwo">
<span class="ast-1">
<span>02. </span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit?
</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="245.454" height="150"
viewBox="0 0 245.454 150">
<path data-name="Icon ionic-ios-arrow-down"
d="M128.96,116.028l92.81-99.275a16.685,16.685,0,0,1,24.774,0,19.844,19.844,0,0,1,0,26.557L141.384,155.785a16.706,16.706,0,0,1-24.189.547L11.3,43.388a19.791,19.791,0,0,1,0-26.557,16.685,16.685,0,0,1,24.774,0Z"
transform="translate(-6.188 -11.247)" fill="#1a1725" />
</svg>
</span>
</button>
</h3>
<div id="twoTwo" class="accordion-collapse collapse" aria-labelledby="twoTwo"
data-bs-parent="#accordionExample">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
</p>
</div>
</div>
<div class="item">
<h3 class="accordion-header" id="headingOne">
<button type="button" class="" data-bs-toggle="collapse" data-bs-target="#twoThree"
aria-controls="twoThree">
<span class="ast-1">
<span>03. </span>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse?
</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="245.454" height="150"
viewBox="0 0 245.454 150">
<path data-name="Icon ionic-ios-arrow-down"
d="M128.96,116.028l92.81-99.275a16.685,16.685,0,0,1,24.774,0,19.844,19.844,0,0,1,0,26.557L141.384,155.785a16.706,16.706,0,0,1-24.189.547L11.3,43.388a19.791,19.791,0,0,1,0-26.557,16.685,16.685,0,0,1,24.774,0Z"
transform="translate(-6.188 -11.247)" fill="#1a1725" />
</svg>
</span>
</button>
</h3>
<div id="twoThree" class="accordion-collapse collapse" aria-labelledby="twoThree"
data-bs-parent="#accordionExample">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
</p>
</div>
</div>
<div class="item">
<h3 class="accordion-header" id="headingOne">
<button type="button" class="" data-bs-toggle="collapse" data-bs-target="#twoFour"
aria-controls="twoFour">
<span class="ast-1">
<span>04. </span>Nam libero tempore, cum soluta nobis est eligendi optio cumque impedit?
</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="245.454" height="150"
viewBox="0 0 245.454 150">
<path data-name="Icon ionic-ios-arrow-down"
d="M128.96,116.028l92.81-99.275a16.685,16.685,0,0,1,24.774,0,19.844,19.844,0,0,1,0,26.557L141.384,155.785a16.706,16.706,0,0,1-24.189.547L11.3,43.388a19.791,19.791,0,0,1,0-26.557,16.685,16.685,0,0,1,24.774,0Z"
transform="translate(-6.188 -11.247)" fill="#1a1725" />
</svg>
</span>
</button>
</h3>
<div id="twoFour" class="accordion-collapse collapse" aria-labelledby="twoFour"
data-bs-parent="#accordionExample">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
</p>
</div>
</div>
</div>
Accordion Style 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
<div class="accordion-style-2 accordion accordion-flush" id="accordionFlushExample">
<div class="item">
<h4 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<span>1. </span>Excepteur sint occaecat cupidatat non proident sunt in culpa deserunt?
</button>
</h4>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi
architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
</p>
</div>
</div>
</div>
<div class="item">
<h4 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
<span>2. </span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit?
</button>
</h4>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi
architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
</p>
</div>
</div>
</div>
<div class="item">
<h4 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
<span>3. </span>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse?
</button>
</h4>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi
architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
</p>
</div>
</div>
</div>
<div class="item">
<h4 class="accordion-header" id="flush-headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour" aria-expanded="false"
aria-controls="flush-collapseFour">
<span>4. </span>Nam libero tempore, cum soluta nobis est eligendi optio cumque impedit?
</button>
</h4>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae illo invent ore veritatis et quasi
architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit.
</p>
</div>
</div>
</div>
</div>