Esto se ha preguntado antes y he leído varias preguntas anteriores, pero por alguna razón las soluciones no funcionan para mí, estoy seguro de que esto es bastante simple, solo sé básicamente 0 HTML, CSS y JS.
Un poco de información, tengo un programa de Python que genera un archivo HTML, este tiene algunos Javascript y CSS básicos para crear un archivo plegable. El valor predeterminado del plegable es todo colapsado. Sin embargo, a veces necesito ver esta página en un navegador que tiene javascript deshabilitado (por ejemplo, cuando abre un archivo HTML enviado por correo electrónico a un dispositivo iOS). Para eso, necesito que el plegable no esté colapsado si no se puede ejecutar Javascript. Esto es lo que tengo y lo que he probado hasta ahora:
<head> <style> .collapsible { cursor: pointer; border: none; text-align: left; outline: none; } .content { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> </head> <body> <h2 class="collapsible">Here's a section to open</h2> <div class="content"> <p>Here's some revealed content</p> </div> <h2 class="collapsible">Here's another section to open</h2> <div class="content"> <p>Here's more revealed content</p> </div> </body> <script> 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"; } }); } </script>He intentado agregar lo siguiente a:
document.getElementsByClassName("content").style.maxHeight = "0";
y establecer el CSS de content.max-height en 100 de forma predeterminada, de modo que si javascript no puede ejecutarse, max-height se mantiene en 100 y se muestran todas las divisiones de contenido. Esto no funciona Las herramientas de depuración de Edge dicen:
TypeError no capturado: no se pueden establecer propiedades de indefinido (estableciendo 'maxHeight')
También intenté agregar lo siguiente después de la etiqueta de estilo principal para anular el CSS original si no se admite javscript:
<noscript> <style> .content { max-height: 100; } </style> </noscript>eso tampoco funciono
No estoy teniendo el error con su código. ¿Quizás la ubicación de su etiqueta noscript estaba causando problemas? Pruebe este código y vea si tiene problemas con él. También puede ser una falta de compatibilidad con html/css en su cliente de correo electrónico si está destinado a ser utilizado en el correo electrónico.
Cambié un par de cosas que eran principalmente cambios estéticos, de legibilidad y de preferencias. Usando el método forEach en lugar de un bucle. Mover las etiquetas de estilo y secuencia de comandos al cuerpo, ya que podrían usarse para componentes de correo electrónico.
<body> <style> .collapsible { cursor: pointer; border: none; text-align: left; outline: none; user-select: none; } .content { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> <h2 class="collapsible">Here's a section to open</h2> <div class="content"> <p>Here's some revealed content</p> </div> <h2 class="collapsible">Here's another section to open</h2> <div class="content"> <p>Here's more revealed content</p> </div> <script> const allColls = document .querySelectorAll(".collapsible"); allColls.forEach(coll => { coll.addEventListener("click", e => { e.target.classList.toggle("active"); const content = e.target.nextElementSibling; if (content.style.maxHeight) content.style.maxHeight = null; else content.style.maxHeight = content.scrollHeight + "px"; }); }); </script> <noscript> <style> .content { max-height: 100; } </style> </noscript> </body>