Tengo un archivo html con la tarjeta Bootstrap y la etiqueta de detalles HTML para crear un panel desplegable plegable.
Aquí hay un ejemplo
<details class="dropdown card mb-3"> <summary class="summary-title card-header"> <strong>Test</strong> <div class="summary-down docutils"> </summary> <div class="summary-content card-body docutils"> <p class="card-text" id=Content1>Content of the dropdown</p> </div> </details>Le di al contenido del panel desplegable una identificación, así que cuando vuelvo a cargar el enlace con el marcador al final (link#content1) obtengo el siguiente problema.
El sitio solo me lleva al marcador en la página si el panel desplegable ya estaba abierto. Si está cerrado, el marcador se ignora en el enlace.
¿Hay alguna forma de abrir el panel desplegable correspondiente si carga el link#content1? (No tengo una etiqueta de anclaje en el html, solo la identificación dada al contenido)
EDITAR: Básicamente, lo que necesito es si cargo la página html a través de la url html#content1, el archivo html debe agregar una etiqueta abierta = "abrir" al elemento de detalles correspondiente.
<details class="dropdown card mb-3" open="open"> <summary class="summary-title card-header"> <strong>Test</strong> <div class="summary-down docutils"> </summary> <div class="summary-content card-body docutils"> <p class="card-text" id=Content1>Content of the dropdown</p> </div> </details>Gracias por adelantado
Como dijiste que no tienes ninguna etiqueta <a> que vincule al elemento oculto y solo quieres que se muestre automáticamente si se accede a la página con el hash #Content1 , puedes usar este código JavaScript, que verifica si el hash es igual a #Content1 y, si es así, agrega open="open" al elemento que contiene "Content1" como ID:
if (window.location.hash === '#Content1') { document.querySelector('#Content1').closest('details').setAttribute('open', 'open'); }