Accordion Style 1
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur and magni dolores eos qui ratione voluptatem sequi nesciunt.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur and magni dolores eos qui ratione voluptatem sequi nesciunt.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur and magni dolores eos qui ratione voluptatem sequi nesciunt.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur and magni dolores eos qui ratione voluptatem sequi nesciunt.
<div class="accordion-style-1" id="accordionExample">
<div class="item">
<div 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="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="92" viewBox="0 0 150 92">
<path data-name="Path 40627"
d="M12.11,150l-12-11.149,68.016-62.7L0,10.935,12.217,0,92,76.357Z"
transform="translate(150) rotate(90)" fill="#1e1e2c" />
</svg>
</span>
<span class="title">Duis aute irure dolor in reprehenderit in voluptate velit?</span>
</button>
</div>
<div id="twoOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
aut fugit sed quia consequuntur and magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
</div>
<div class="item">
<div class="accordion-header" id="headingOne">
<button type="button" class="" data-bs-toggle="collapse" data-bs-target="#twoTwo"
aria-controls="twoTwo">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="92" viewBox="0 0 150 92">
<path data-name="Path 40627"
d="M12.11,150l-12-11.149,68.016-62.7L0,10.935,12.217,0,92,76.357Z"
transform="translate(150) rotate(90)" fill="#1e1e2c" />
</svg>
</span>
<span class="title">Nam libero tempore, cum soluta nobis est eligendi optio cumque? </span>
</button>
</div>
<div id="twoTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
aut fugit sed quia consequuntur and magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
</div>
<div class="item">
<div class="accordion-header" id="headingOne">
<button type="button" class="" data-bs-toggle="collapse" data-bs-target="#twoThree"
aria-controls="twoThree">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="92" viewBox="0 0 150 92">
<path data-name="Path 40627"
d="M12.11,150l-12-11.149,68.016-62.7L0,10.935,12.217,0,92,76.357Z"
transform="translate(150) rotate(90)" fill="#1e1e2c" />
</svg>
</span>
<span class="title">Nemo enim ipsam voluptatem qui voluptas sit aspernatur aut odit aut?</span>
</button>
</div>
<div id="twoThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
aut fugit sed quia consequuntur and magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
</div>
<div class="item">
<div class="accordion-header" id="headingOne">
<button type="button" class="" data-bs-toggle="collapse" data-bs-target="#twoFour"
aria-controls="twoFour">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="92" viewBox="0 0 150 92">
<path data-name="Path 40627"
d="M12.11,150l-12-11.149,68.016-62.7L0,10.935,12.217,0,92,76.357Z"
transform="translate(150) rotate(90)" fill="#1e1e2c" />
</svg>
</span>
<span class="title">Quis autem vel eum iure reprehenderit qui in ea voluptate velit?</span>
</button>
</div>
<div id="twoFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
aut fugit sed quia consequuntur and magni dolores eos qui ratione voluptatem sequi nesciunt.
</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">
<div class="accordion-header" id="headingOne">
<button type="button" class="border-style" data-bs-toggle="collapse" data-bs-target="#One"
aria-controls="One" aria-expanded="true">
<span class="title">01. Duis aute irure dolor in reprehenderit in voluptate velit?</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="92" viewBox="0 0 150 92">
<path data-name="Path 40627"
d="M12.11,150l-12-11.149,68.016-62.7L0,10.935,12.217,0,92,76.357Z"
transform="translate(150) rotate(90)" fill="#1e1e2c" />
</svg>
</span>
</button>
</div>
<div id="One" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<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">
<div class="accordion-header" id="headingOne">
<button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Two"
aria-controls="Two">
<span class="title">02. Nemo enim ipsam voluptatem qui voluptas sit aspernatur aut odit aut?</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="92" viewBox="0 0 150 92">
<path data-name="Path 40627"
d="M12.11,150l-12-11.149,68.016-62.7L0,10.935,12.217,0,92,76.357Z"
transform="translate(150) rotate(90)" fill="#1e1e2c" />
</svg>
</span>
</button>
</div>
<div id="Two" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<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">
<div class="accordion-header" id="headingOne">
<button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Three"
aria-controls="Three">
<span class="title">03. Quis autem vel eum iure reprehenderit qui in ea voluptate velit?</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="92" viewBox="0 0 150 92">
<path data-name="Path 40627"
d="M12.11,150l-12-11.149,68.016-62.7L0,10.935,12.217,0,92,76.357Z"
transform="translate(150) rotate(90)" fill="#1e1e2c" />
</svg>
</span>
</button>
</div>
<div id="Three" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<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">
<div class="accordion-header" id="headingOne">
<button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Four"
aria-controls="Four">
<span class="title">04. Nam libero tempore, cum soluta nobis est eligendi optio cumque?</span>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="92" viewBox="0 0 150 92">
<path data-name="Path 40627"
d="M12.11,150l-12-11.149,68.016-62.7L0,10.935,12.217,0,92,76.357Z"
transform="translate(150) rotate(90)" fill="#1e1e2c" />
</svg>
</span>
</button>
</div>
<div id="Four" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<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>