默认情况下如何使可折叠内容传播（显示）

Question

I found the tutorial in w3school ( https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol ), but the collapsible content is hidden by default. Below section is the code from the link. Please help me to find how to change from collapsible content hidden by default to content spread (show) by default. Thanks!

 var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); }

 /* Style the button that is used to open and close the collapsible content */ .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .collapsible:hover { background-color: #555; } .collapsible:after { content: '\\002B';/* Unicode character for "plus" sign (+) */ color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212";/* Unicode character for "minus" sign (-) */ } .content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; }

 <h2>Animated Collapsibles</h2> <p>A Collapsible:</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <p>Collapsible Set:</p> <button class="collapsible">Open Section 1</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="collapsible">Open Section 2</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="collapsible">Open Section 3</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>

Answer 1

Just as said @Andy Hoffman just one more thing to get all style

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
       this.classList.toggle("active");
       var content = this.nextElementSibling;
       if (content.style.maxHeight) {
           content.style.maxHeight = null;
       } else {
          content.style.maxHeight = content.scrollHeight + "px";
       }
    });

   coll[i].classList.toggle("active");
   coll[i].nextElementSibling.style.maxHeight = coll[i].scrollHeight + "px";

}