Bootstrap 5, auto increment accordion data.

Job ID: 31486487

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-->
Related categories: JavaScript CSS HTML5 HTML jQuery / Prototype