• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

91
Vistas
Bookmark link should open panel

I have an html file with the Bootstrap card and the HTML details tag to create a collapsible drop-down panel.

Here is an example

<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>

I gave the content of the dropdown panel an ID so when i reload the link with the bookmark at the end (link#content1 ) i get the following problem.

The site only gets me to the bookmark at the page if the dropdown panel was already opened. If its closed the bookmark gets ignored in the link.

Is there any way to open the corresponding dropdown panel if you load the link#content1? (I dont have an anchor tag in the html only the id given to the content)

EDIT: Basically what i need is if i load the html page trough the url html#content1 the html file needs to add an open = "open" tag to the corresponding details element.

<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>

Thanks in advance

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

As you said you don't have any <a> tag linking to the hidden element and just want it to be automatically shown if the page is accessed with the #Content1 hash, you can use this JavaScript code, which checks if the hash equals to #Content1 and, if so, adds open="open" to the element that contains "Content1" as ID:

if (window.location.hash === '#Content1') {
  document.querySelector('#Content1').closest('details').setAttribute('open', 'open');
}
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda