Question

0

38

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

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-13T09:31:43.971Z

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');
}