I am currently working on implementing an accordion feature for my webpage. Everything is functioning correctly when I click the button, but there is one issue - the div opens automatically when the page loads. My goal is to have the div closed initially and only open when the button is clicked.
<a href="" class="accordion">Click here</a>
<div class="panel" id="AccordionDiv">
<div class="store">
<div class="store-row">
<div class="cells store-logo text-center">
<img src="@strStaticWebsiteUrl@(objOfferPrice.StoreImage)" alt="" />
</div>
@if (objOfferPrice.Price < objOfferPrice.UrlPrice)
{
<div class="cells text-center">
<div class="product-price offer-price">Rs. @String.Format(System.Globalization.CultureInfo.InvariantCulture, "{0:0,0}", objOfferPrice.Price)<sup>*</sup></div>
<p class="real-price">Price: @objOfferPrice.UrlPrice</p>
</div>
}
</div>
</div>
The following code snippet includes HTML and JavaScript:
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>