Accordion
# Style 01
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
Vcelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.
Atotam 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.
<div class="accordion" id="accordion">
<div class="card">
<h2 class="card-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">How Do I Post a Job ?</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="card-body">
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</div>
</div>
</div>
<div class="card">
<h2 class="card-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">Why Won't My Payment Go Through ?</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
<div class="card-body">
Vcelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.
</div>
</div>
</div>
<div class="card">
<h2 class="card-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">How to Changing the Account Name ?</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
<div class="card-body">
Atotam 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.
</div>
</div>
</div>
</div>
# Style 02
Assistant Manager
Featured
Sr. Project Manager
Hot
<div id="accordion2" class="accordion-style1">
<div class="card card-style3 mb-3 bg-white" id="headingFour" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="true" role="navigation">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img src="img/content/job-01.jpg" alt="..." class="me-3 border-radius-10">
<h5 class="mb-0">Assistant Manager</h5>
</div>
<div class="job-badge purple">Featured</div>
</div>
</div>
<div id="collapseFour" class="accordion-collapse collapse show" aria-labelledby="headingFour" data-bs-parent="#accordion2">
<div class="card-body mt-n1 pt-0">
<p class="mb-3">Start taking a while for your job search to request and agenda informational interviews with human beings withinside the fields you’re interested by to find out about their profession paths and get profession advice.</p>
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="display-30 me-2"><i class="fas fa-map-marker-alt pe-2"></i>Canada</span>
<span class="display-30"><i class="far fa-money-bill-alt pe-2"></i>$25K</span>
</div>
<a class="job-favourite me-2" href="#!"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
</div>
<div class="card card-style3 mb-3 bg-white" id="headingFive" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="true" role="navigation">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img src="img/content/job-02.jpg" alt="..." class="me-3 border-radius-10">
<h5 class="mb-0">Sr. Project Manager</h5>
</div>
<div class="job-badge red">Hot</div>
</div>
</div>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordion2">
<div class="card-body mt-n1 pt-0">
<p class="mb-3">Start taking a while for your job search to request and agenda informational interviews with human beings withinside the fields you’re interested by to find out about their profession paths and get profession advice.</p>
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="display-30 me-2"><i class="fas fa-map-marker-alt pe-2"></i>California</span>
<span class="display-30"><i class="far fa-money-bill-alt pe-2"></i>$15K</span>
</div>
<a class="job-favourite me-2" href="#!"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
</div>
<div class="card card-style3 bg-white" id="headingSix" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="true" role="navigation">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img src="img/content/job-03.jpg" alt="..." class="me-3 border-radius-10">
<h5 class="mb-0">UI / UX Designer</h5>
</div>
<div class="job-badge purple">Featured</div>
</div>
</div>
<div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordion2">
<div class="card-body mt-n1 pt-0">
<p class="mb-3">Start taking a while for your job search to request and agenda informational interviews with human beings withinside the fields you’re interested by to find out about their profession paths and get profession advice.</p>
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="display-30 me-2"><i class="fas fa-map-marker-alt pe-2"></i>New York</span>
<span class="display-30"><i class="far fa-money-bill-alt pe-2"></i>$18K</span>
</div>
<a class="job-favourite me-2" href="#!"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>