I am working on an RSS feed-based project where I have to render accordions dynamically using DOM manipulation.
It works fine on opening an accordion but does not get closed on toggling on the same accordion. Here's my function for rendering Accords based on some response data
const renderAccordionSection = (index, id, title) => {
let divAccordion = `<div class="accordion-item">
<button class="accordion-button ${index === 0 ? "" : "collapsed"}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-${id}" aria-expanded="true" aria-controls="collapse-${id}">
${title}
</button>
<div id="collapse-${id}" class="accordion-collapse collapse ${index === 0 ? "show": ""}" aria-labelledby="heading-${id}" data-bs-parent="#accordionId">
<div class="accordion-body">
<div id="indicator-${id}" class="carousel slide " data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-inner-${id}">
</div>
<div>
<a class="carousel-control-prev" href="#indicator-${id}" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div>
<a class="carousel-control-next" href="#indicator-${id}" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>`;
return divAccordion;
}