Estoy creando un sitio web para que sirva como un centro para todo mi contenido creativo. Estoy haciendo esto para un proyecto y he estado siguiendo tutoriales aleatorios para llegar a donde estoy. Actualmente, estoy perplejo porque una sección plegable que estoy tratando de implementar está funcionando. En el sentido de que cuando hago clic, el + cambia a un - que muestra que se está registrando el clic. Sin embargo, el contenido no se expande, permanece oculto.

Código HTML en cuestión:

 <section> <button type="button" class="collapsible"><h5>Click Here to View Entire YouTube Library!</h5></button> <div class="content"> <p>Lorem ipsum...ALLLLLLLLLLLLLLLLLLL</p> </div> <script src="collapsible.js"></script> </section>

JavaScript que se utiliza:

 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.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }

Relaciona css en caso de ser requerido:

 .collapsible { background-color: #000; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #272727; } .content { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .collapsible:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: white; float: right; margin-left: 5px; } .active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ }

Tenga en cuenta que soy un novato siguiendo tutoriales, por lo que aún no tendré una comprensión profunda del tema. Cualquier ayuda es apreciada. ¡Gracias!