Bootstrap 5, auto increment accordion data.
Budget: $10 – $30 USD
Hello Freelancers,
I would like to make my FAQ page dynamic and use javascript or jquery to auto increment the accordion.
The following needs to be auto increment so when the user clicks on the faq, it will toggle that specific data.
data-bs-target=
aria-controls=
div id=
These should all auto increment to values such as faq1, faq2, faq3 etc.
<div class="card-body">
<div class="accordion" id="accordionExample-faq">
<div class="accordion-item">
<h2 class="accordion-header mt-0" id="headingOne">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#faq" aria-expanded="true" aria-controls="faq">
Question 1
</button>
</h2>
<div id="faq" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample-faq">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon officia aute,
3 wolf moon officia aute, non cupidatat life accusamus terry richardson ad squid.
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header mt-0" id="headingTwo">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#faq" aria-expanded="false" aria-controls="faq">
Question 2
</button>
</h2>
<div id="faq" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample-faq">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon officia aute,
3 wolf moon officia aute, non cupidatat life accusamus terry richardson ad squid.
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header mt-0" id="headingThree">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#faq" aria-expanded="false" aria-controls="faq">
Question 3
</button>
</h2>
<div id="faq" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample-faq">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon officia aute,
3 wolf moon officia aute, non cupidatat life accusamus terry richardson ad squid.
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div><!--end accordion-->
</div><!--end card-body-->
I would like to make my FAQ page dynamic and use javascript or jquery to auto increment the accordion.
The following needs to be auto increment so when the user clicks on the faq, it will toggle that specific data.
data-bs-target=
aria-controls=
div id=
These should all auto increment to values such as faq1, faq2, faq3 etc.
<div class="card-body">
<div class="accordion" id="accordionExample-faq">
<div class="accordion-item">
<h2 class="accordion-header mt-0" id="headingOne">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#faq" aria-expanded="true" aria-controls="faq">
Question 1
</button>
</h2>
<div id="faq" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample-faq">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon officia aute,
3 wolf moon officia aute, non cupidatat life accusamus terry richardson ad squid.
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header mt-0" id="headingTwo">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#faq" aria-expanded="false" aria-controls="faq">
Question 2
</button>
</h2>
<div id="faq" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample-faq">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon officia aute,
3 wolf moon officia aute, non cupidatat life accusamus terry richardson ad squid.
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header mt-0" id="headingThree">
<button class="accordion-button collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#faq" aria-expanded="false" aria-controls="faq">
Question 3
</button>
</h2>
<div id="faq" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample-faq">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon officia aute,
3 wolf moon officia aute, non cupidatat life accusamus terry richardson ad squid.
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div><!--end accordion-->
</div><!--end card-body-->