Whenever the ajax call is successful, I am appending the content to the element with the id #special-contents. However, upon page load, the collapse button does not expand the panel. Below is my JavaScript code:
$.ajax({
url: `${URL}/promotions/`,
method: 'GET',
dataType: 'json',
success: function (response) {
var promotions = response.promotions;
var specialPromotions = filterByCategory(promotions, 'special');
for (var i = 0; i < specialPromotions.length; i++) {
var specialPromotion = specialPromotions[i];
// Append
$('#special-contents').append(
`<div class="col-md-6">
<div class="panel">
<div class="promotionBox promotionBox1">
<div class="promotionImage">
<img src="${specialPromotion.banner}">
</div>
<div class="promotionDesc promotionDesc1">
<p>${specialPromotion.title}</p>
<button data-category="Special" class="promotion-details btnShadow" type="button" data-toggle="collapse" data-target="special-${specialPromotion.id}" aria-expanded="false">
View Details
</button>
<a href="${specialPromotion.btn_link}" class="btnShadow"
target="_blank">Visit</a>
<div id="special-${specialPromotion.id}" class="panel-collapse collapse ">
<div class="panel-body">
<div class="promotionDetailsContent">
${specialPromotion.content}
</div>
</div>
</div>
</div>
</div>
</div>
</div>`
);
}
},
error: function (error) {
console.error('Error fetching promotions:', error);
}
});
It should be noted that when I added it directly to the #special-contents element (static content), the collapse feature works as intended.