Jump to content

Collapse accordian with a button or reload page


anmldr

Recommended Posts

I have used the script for creating an accordion from w3Schools .  I would like to add a button somwhere on the page that would collapse all that are open. Even if it is just a reload of the page which would work.

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

Please help.  I am definitely a newbie.

 

JustAnotherNewbie

Link to comment
Share on other sites

Use the same method to get all of the elements by class name and loop through them.  For each element, instead of adding a click event you need to remove the active class, get the next sibling like the code above is doing, and set display to none.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...