Configuring the Accordion
Here is the HTML code for the basic structure of the accordion in Homepage Artist:
<!-- ======================================================================= -->
<!-- ACCORDION START -->
<!-- ======================================================================= -->
<div class="accordion rdn_accordion" id="faq_accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button collapsed d-flex gap-2"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
<span>01</span>
How do I join the cycling club?
</button>
</h2>
<!-- accordion-header -->
<div
id="collapseOne"
class="accordion-collapse collapse"
aria-labelledby="headingOne"
data-bs-parent="#faq_accordion"
>
<div class="accordion-body">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="faq_img position-relative mb-lg-0 mb-4">
<img
src="img/faq/1.jpg"
class="img-fluid rounded-2 shadow-sm"
alt=""
/>
<div
class="d-flex position-absolute align-items-center bottom-0 start-0 gap-1 p-1"
>
<i class="ph ph-seal-check fs-3 text-white"></i>
<p
class="bg_green fw-semibold d-inline-flex rounded-0 lh-1 fs-6 text-uppercase rounded-pill mb-0 px-4 py-1 text-white shadow-sm"
>
f.a.q.
</p>
</div>
<!-- /.d-flex -->
</div>
<!-- /.faq_img -->
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-8">
<p>
We host a variety of events, from scenic rides and charity cruises
to challenging rallies and family-friendly picnics. Check our
events calendar for details.
</p>
<ul class="rdn_list mb-0">
<li>Create a repository of popular cycling routes.</li>
<li>Share maintenance guides and tutorials to help members .</li>
<li>
Encourage members to get involved in community service projects
related to cycling.
</li>
</ul>
<!-- rdn_list -->
</div>
<!-- /.col-lg-8 -->
</div>
<!-- /.row -->
</div>
<!-- accordion-body -->
</div>
<!-- accordion-collapse -->
</div>
<!-- accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button
class="accordion-button d-flex gap-2"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
<span>02</span>
Are there rides for beginners?
</button>
</h2>
<div
id="collapseTwo"
class="accordion-collapse show collapse"
aria-labelledby="headingTwo"
data-bs-parent="#faq_accordion"
>
<div class="accordion-body">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="faq_img position-relative mb-lg-0 mb-4">
<img
src="img/faq/2.jpg"
class="img-fluid rounded-2 shadow-sm"
alt=""
/>
<div
class="d-flex position-absolute align-items-center bottom-0 start-0 gap-1 p-1"
>
<i class="ph ph-seal-check fs-3 text-white"></i>
<p
class="bg_green fw-semibold d-inline-flex rounded-0 lh-1 fs-6 text-uppercase rounded-pill mb-0 px-4 py-1 text-white shadow-sm"
>
f.a.q.
</p>
</div>
<!-- /.d-flex -->
</div>
<!-- /.faq_img -->
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-8">
<p>
We host a variety of events, from scenic rides and charity cruises
to challenging rallies and family-friendly picnics. Check our
events calendar for details.
</p>
<ul class="rdn_list mb-0">
<li>Create a repository of popular cycling routes.</li>
<li>Share maintenance guides and tutorials to help members .</li>
<li>
Encourage members to get involved in community service projects
related to cycling.
</li>
</ul>
<!-- rdn_list -->
</div>
<!-- /.col-lg-8 -->
</div>
<!-- /.row -->
</div>
<!-- accordion-body -->
</div>
<!-- accordion-collapse -->
</div>
<!-- accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button
class="accordion-button d-flex collapsed gap-2"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
<span>03</span>
What types of cycling events do you organize?
</button>
</h2>
<div
id="collapseThree"
class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#faq_accordion"
>
<div class="accordion-body">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="faq_img position-relative mb-lg-0 mb-4">
<img
src="img/faq/3.jpg"
class="img-fluid rounded-2 shadow-sm"
alt=""
/>
<div
class="d-flex position-absolute align-items-center bottom-0 start-0 gap-1 p-1"
>
<i class="ph ph-seal-check fs-3 text-white"></i>
<p
class="bg_green fw-semibold d-inline-flex rounded-0 lh-1 fs-6 text-uppercase rounded-pill mb-0 px-4 py-1 text-white shadow-sm"
>
f.a.q.
</p>
</div>
<!-- /.d-flex -->
</div>
<!-- /.faq_img -->
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-8">
<p>
We host a variety of events, from scenic rides and charity cruises
to challenging rallies and family-friendly picnics. Check our
events calendar for details.
</p>
<ul class="rdn_list mb-0">
<li>Create a repository of popular cycling routes.</li>
<li>Share maintenance guides and tutorials to help members .</li>
<li>
Encourage members to get involved in community service projects
related to cycling.
</li>
</ul>
<!-- rdn_list -->
</div>
<!-- /.col-lg-8 -->
</div>
<!-- /.row -->
</div>
<!-- accordion-body -->
</div>
<!-- accordion-collapse -->
</div>
<!-- accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button
class="accordion-button d-flex collapsed gap-2"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseFour"
aria-expanded="false"
aria-controls="collapseFour"
>
<span>04</span>
Do I need special gear to participate?
</button>
</h2>
<div
id="collapseFour"
class="accordion-collapse collapse"
aria-labelledby="headingFour"
data-bs-parent="#faq_accordion"
>
<div class="accordion-body">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="faq_img position-relative mb-lg-0 mb-4">
<img
src="img/faq/4.jpg"
class="img-fluid rounded-2 shadow-sm"
alt=""
/>
<div
class="d-flex position-absolute align-items-center bottom-0 start-0 gap-1 p-1"
>
<i class="ph ph-seal-check fs-3 text-white"></i>
<p
class="bg_green fw-semibold d-inline-flex rounded-0 lh-1 fs-6 text-uppercase rounded-pill mb-0 px-4 py-1 text-white shadow-sm"
>
f.a.q.
</p>
</div>
<!-- /.d-flex -->
</div>
<!-- /.faq_img -->
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-8">
<p>
We host a variety of events, from scenic rides and charity cruises
to challenging rallies and family-friendly picnics. Check our
events calendar for details.
</p>
<ul class="rdn_list mb-0">
<li>Create a repository of popular cycling routes.</li>
<li>Share maintenance guides and tutorials to help members .</li>
<li>
Encourage members to get involved in community service projects
related to cycling.
</li>
</ul>
<!-- rdn_list -->
</div>
<!-- /.col-lg-8 -->
</div>
<!-- /.row -->
</div>
<!-- accordion-body -->
</div>
<!-- accordion-collapse -->
</div>
<!-- accordion-item -->
</div>
<!-- ======================================================================= -->
<!-- ACCORDION END -->
<!-- ======================================================================= -->
If you want to create another or new accordion, make sure to use a different ID for the rdn_accordion class.
Also, ensure that you use the same data-bs-target value as the ID of the corresponding accordion-collapse element.
Example:
<div class="rdn_accordion accordion" id="services_accordian">
<div class="accordion-item">
<h2 class="accordion-header" id="someHeader">
<button
class="accordion-button collapsed d-flex gap-2"
type="button"
data-bs-toggle="collapse"
data-bs-target="#SameID"
aria-expanded="false"
aria-controls="SameID"
>
Some title
</button>
</h2>
<div
id="SameID"
class="accordion-collapse collapse"
aria-labelledby="someHeader"
data-bs-parent="#services_accordian"
>
<div class="accordion-body">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum dolor
nobis iste harum nemo obcaecati totam corrupti illum at voluptates.
Similique necessitatibus autem, eos rem aspernatur minima. Dolorum,
officiis ullam.
</p>
</div>
</div>
</div>
....
</div>
You can see this link for more info about accordion and other element.