Estoy usando el ejemplo de w3schools para crear una serie de secciones contraíbles en una sola página html. El plegable está hecho como una combinación de CSS y algún código JavaScript incrustado.
Supongamos que el visitante de la página quiere buscar en la página utilizando la función "Buscar en la página" (CTRL-F) del navegador. Si se encuentra un hit, el navegador se moverá al hit (y lo resaltará), pero permanecerá oculto en el contraíble. ¿Cómo haría para abrir automáticamente ese plegable cuando llegue la búsqueda?
Limitación: no quiero usar bibliotecas externas como jQuery. La página html debería terminar en una unidad local y debería funcionar sin acceso a Internet.
El código simplificado de w3schools se proporciona a continuación. Supongamos que el usuario presiona CTRL-F y busca supercalifragilistic , el navegador resaltará la primera ocurrencia y moverá el foco hacia ella. Pero se queda escondido en el plegable. ¿Hay alguna manera de abrir el plegable después de una búsqueda exitosa?
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .collapsible:after { content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } </style> </head> <body> <h2>Animated Collapsibles</h2> <p>A Collapsible:</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>Collapsible 1 text supercalifragilistic.</p> </div> <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> </body> </html>