Estoy aprendiendo html/css y aprendí el menú de acordeón hace 2 días. Pero quiero hacer lo mismo al revés. En otras palabras, los menús estarán abiertos al inicio, cuando haga clic en el título, se colapsarán. Desafortunadamente nunca pude hacer eso. ¿Alguien tiene alguna idea?
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.maxHeight) { panel.style.maxHeight = null } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } .accordion { background-color: #FFFFFF; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; font-size: 15px; } .accordion:after { content: "\002B"; /* plus sign */ font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } /* minus sign */ .panel { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } <table width="750"> <td style="width: 100%;"> <button class="accordion">Header 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> </div> <button class="accordion">Header 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> </div> <button class="accordion">Header 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> </div> </td> </table>Simplemente agregue manualmente active en el accordion button y style="max-height: 50px;" al panel
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.maxHeight) { panel.style.maxHeight = null } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } .accordion { background-color: #FFFFFF; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; font-size: 15px; } .accordion:after { content: "\002B"; /* plus sign */ font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } /* minus sign */ .panel { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } <table width="750"> <td style="width: 100%;"> <button class="accordion active">Header 1</button> <div class="panel" style="max-height: 50px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> </div> <button class="accordion active">Header 2</button> <div class="panel" style="max-height: 50px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> </div> <button class="accordion active">Header 3</button> <div class="panel" style="max-height: 50px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> </div> </td> </table>