Accordion Style1
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-1" id="accordionExample">
<div class="item">
<h3 class="accordion-header" id="headingOne"><button aria-controls="twoOne" aria-expanded="true"
class="border-style" data-bs-target="#twoOne" data-bs-toggle="collapse" type="button">Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt?</button></h3>
<div class="icon"><button aria-controls="twoOne" aria-expanded="true" class="border-style"
data-bs-target="#twoOne" data-bs-toggle="collapse" type="button"><svg height="150"
viewbox="0 0 245.454 150" width="245.454" xmlns="http://www.w3.org/2000/svg">
<path
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"
data-name="Icon ionic-ios-arrow-down" fill="#1a1725"
transform="translate(-6.188 -11.247)"></path>
</svg></button></div>
<div class="accordion-collapse collapse show" data-bs-parent="#accordionExample" id="twoOne">
<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 aria-controls="twoTwo" data-bs-target="#twoTwo"
data-bs-toggle="collapse" type="button">Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id?</button></h3>
<div class="icon"><button aria-controls="twoTwo" data-bs-target="#twoTwo" data-bs-toggle="collapse"
type="button"><svg height="150" viewbox="0 0 245.454 150" width="245.454"
xmlns="http://www.w3.org/2000/svg">
<path
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"
data-name="Icon ionic-ios-arrow-down" fill="#1a1725"
transform="translate(-6.188 -11.247)"></path>
</svg></button></div>
<div class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="twoTwo">
<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 aria-controls="twoThree"
data-bs-target="#twoThree" data-bs-toggle="collapse" type="button">Nam libero tempore, cum
soluta nobis est eligendi optio cumque nihil impedit quo minus?</button></h3>
<div class="icon"><button aria-controls="twoThree" data-bs-target="#twoThree"
data-bs-toggle="collapse" type="button"><svg height="150" viewbox="0 0 245.454 150"
width="245.454" xmlns="http://www.w3.org/2000/svg">
<path
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"
data-name="Icon ionic-ios-arrow-down" fill="#1a1725"
transform="translate(-6.188 -11.247)"></path>
</svg></button></div>
<div class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="twoThree">
<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 aria-controls="twoFour"
data-bs-target="#twoFour" data-bs-toggle="collapse" type="button">Nemo enim ipsam voluptatem
quia voluptas sit aspernatur autiu odit aut fugit consequuntur?</button></h3>
<div class="icon"><button aria-controls="twoFour" data-bs-target="#twoFour"
data-bs-toggle="collapse" type="button"><svg height="150" viewbox="0 0 245.454 150"
width="245.454" xmlns="http://www.w3.org/2000/svg">
<path
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"
data-name="Icon ionic-ios-arrow-down" fill="#1a1725"
transform="translate(-6.188 -11.247)"></path>
</svg></button></div>
<div class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="twoFour">
<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 ab illo inve veritatis et quasi arc hitecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptase sit aspernatur aut odit aut fugit, sed quia consequuntur. Excepteur sint occa ecat cupida tat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inve veritatis et quasi arc hitecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptase sit aspernatur aut odit aut fugit, sed quia consequuntur. Excepteur sint occa ecat cupida tat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inve veritatis et quasi arc hitecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptase sit aspernatur aut odit aut fugit, sed quia consequuntur. Excepteur sint occa ecat cupida tat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inve veritatis et quasi arc hitecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptase sit aspernatur aut odit aut fugit, sed quia consequuntur. Excepteur sint occa ecat cupida tat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="accordion-style-2" id="accordionExample">
<div class="item">
<h3 class="accordion-header" id="headingOne"><button aria-controls="One" aria-expanded="true"
class="border-style" data-bs-target="#One" data-bs-toggle="collapse" type="button"><span>01.
</span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium ?</button>
</h3>
<div class="accordion-collapse collapse show" data-bs-parent="#accordionExample" id="One">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inve veritatis et quasi arc hitecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptase sit aspernatur
aut odit aut fugit, sed quia consequuntur. Excepteur sint occa ecat cupida tat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="item">
<h3 class="accordion-header" id="headingOne"><button aria-controls="Two" data-bs-target="#Two"
data-bs-toggle="collapse" type="button"><span>02. </span>Excepteur sint occa ecat cupida tat
non proident, sunt in culpa qui official ?</button></h3>
<div class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="Two">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inve veritatis et quasi arc hitecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptase sit aspernatur
aut odit aut fugit, sed quia consequuntur. Excepteur sint occa ecat cupida tat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="item">
<h3 class="accordion-header" id="headingOne"><button aria-controls="Three" data-bs-target="#Three"
data-bs-toggle="collapse" type="button"><span>03. </span>Lorem perspiciatis unde omnis iste
natus error sit voluptatem accusantium ?</button></h3>
<div class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="Three">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inve veritatis et quasi arc hitecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptase sit aspernatur
aut odit aut fugit, sed quia consequuntur. Excepteur sint occa ecat cupida tat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="item">
<h3 class="accordion-header" id="headingOne"><button aria-controls="Four" data-bs-target="#Four"
data-bs-toggle="collapse" type="button"><span>04. </span>Ut dolore nde omnis iste natus
error sit voluptatem accusantium ?</button></h3>
<div class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="Four">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inve veritatis et quasi arc hitecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptase sit aspernatur
aut odit aut fugit, sed quia consequuntur. Excepteur sint occa ecat cupida tat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>