htmlanchor

How to anchor to a target element inside a collapsed HTML details element

The code below has a <details> element which can be expanded and collapsed. Within its collapsible contents, we have an anchored <div> element. The link To header down below, refers to this anchor.

When the <details> element is collapsed, clicking the link does not do anything in Firefox and possibly older versions of Chrome1. When the <details> is unfolded, clicking the link does scroll up to the <details> element. Is there any way of making the <details> auto-expand upon clicking the link To header when it is collapsed?

<details>
  <summary>Header</summary>
  <div id=anchored>
  Should anchor here.
  </div>
</details><br style="font-size:100vh;">
<a href="#anchored">To Header</a>

1 When this question was originally posted, it didn't work on the current version of Chrome, but it does now. However, as of Firefox 129.0, it still does not work in that browser.

Solution

  • JavaScript solution

    const openDetailsIfAnchorHidden = (evt) => {
  const target = evt.currentTarget.getAttribute("href"); // "#anchored"
  const elTarget = document.querySelector(target);

  if (!elTarget) return; // No such element in DOM. Do nothing
  if (elTarget.offsetHeight > 0 || elTarget.getClientRects().length) return; // Already visible

  // Open all <details> ancestors
  let elDetails = elTarget.closest("details");
  while (elDetails) {
    if (elDetails.matches("details")) elDetails.open = true;
    elDetails = elDetails.parentElement;
  }
}

document.querySelectorAll("[href^='#']").forEach((el) => {
  el.addEventListener("click", openDetailsIfAnchorHidden);
});
    Don't open summary.<br> Scroll to the bottom of the page, and click the anchor.<br> Summary should open and the page should scroll to the target.

<details>
  <summary>Header</summary>
  <div id="anchored">DETAILS OPEN! Should anchor here.</div>
</details>

<p style="height:100vh;"></p>
<a href="#anchored">Open details and scroll to #anchored</a>

    Using jQuery

    $("[href^='#']").on("click", function() {
  const $target = $(this.getAttribute("href"));
  if ($target.is(":hidden")) {
    $target.parents("details").prop("open", true);
  }
});
    Don't open summary.<br>
Scroll to the bottom of the page, and click the anchor.<br>
Summary should open and the page should scroll to the target.

<details>
  <summary>Header</summary>
  <div id="anchored">DETAILS OPEN! Should anchor here.</div>
</details>

<p style="height:100vh;"></p>
<a href="#anchored">Open details and scroll to #anchored</a>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

    Chrome seem to work by default. If a target-ed element is inside a (collapsed) <details> Element, should open/expand it. But, as reported in comments, Firefox does not open (by default) the <details> on target-follow.

    Don't open summary.<br>
Scroll to the bottom of the page, and click the anchor.<br>
Summary should open and the page should scroll to the target.

<details>
  <summary>Header</summary>
  <div id="anchored">DETAILS OPEN! Should anchor here.</div>
</details>

<p style="height:100vh;"></p>
<a href="#anchored">Open details and scroll to #anchored</a>