AngularJS [SOLVED]: Accordian div Pops up on page load

AngularJS [SOLVED]: Accordian div Pops up on page load

Home Forums Frameworks AngularJS tutorials AngularJS [SOLVED]: Accordian div Pops up on page load

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #246133

    Cloudy Point
    Keymaster

    QuestionQuestion

    I’m trying to use accordian to create my page.
    It works fine when I click the button but the only problem is that the div comes open on page load and I want it to be closed. It should 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>
    

    This is html code and below is the Script code.

                <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>
    

    #246134

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    Simply add style="display:none" to your pannel div

    Change

     <div class="panel" id="AccordionDiv">
    

    To

     <div class="panel" id="AccordionDiv" style="display:none">
    

    Wokring demo

    Source: https://stackoverflow.com/questions/47918196/accordian-div-pops-up-on-page-load
    Author: jitender
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.