2
<html><body>
<details open><summary>This is the summary</summary>
  <a name="a1"></a>
  <p>Here are all the details.</p>
  </details>
<p>Imagine more than a page of text here.</p>
<p><a href="#a1">This</a> is a link pointing inside the details.</p>
</body></html>

I'm opening my above HTML code with the Firefox browser. When I click on the "This" link Firefox correctly scrolls to the page to the details.

However, when I click the triangle left to the title "This is the summary", and the details (including the line with the anchor) get closed (disappear), clicking on the link Firefox does not scroll to the anchor any more.

I would have expected Firefox at least to scroll to the visible summary that hides the anchor even when the details are closed, but ideally also to open up the details and scroll exactly to the anchor.

Is there a way (HTML? css? using which browser? other?) that enables scrolling to anchors in closed (folded) details of the details-summary block?

My question is related to Scroll to anchor when expanding details/summary?, but I would prefer a javascript-free solution if one exists.

To test your solution please substitute the "more than a page of text here" with actually more than one page of text.

bgukw
  • 51
  • 4

2 Answers2

3

The problem is that anchor tags only scroll to a local element if it matches an id, not name, attribute. You must have an element that matches the given id in the a href to scroll to it. Here is the fixed code:

<html>
<body>
  <details>
    <summary>This is the summary</summary>
    <a id="a1">Scroll here</a>
    <p>
      Here are all the details. Imagine more than a page of text.
    </p>
  </details>
  <p>
    <a href="#a1">This</a>
    is a link pointing inside the details.
  </p>
</body>
</html>

Edit: Also, the reason it does not scroll to the elements within the details when it is closed is because those elements are not actually rendered. The link only scrolls to elements that are currently being rendered. You can easily preview this by adding style="padding-bottom: 100vh" to the details tag and clicking the a tag on the bottom. If you do want it to still scroll to it, then you must add some JS to first open the details tag when the given a tag is clicked or simply add the a1 id to the details tag.

sno2
  • 3,274
  • 11
  • 37
  • I'm sorry, your solution doesn't work for me. I've updated my question with a suggestion where to include more than one page of text for testing purposes. Would you please test your solution that way? If it works what browser and version do you use? Thank you – bgukw Sep 04 '21 at 15:55
  • @bgukw I have edited by answer. The last sentence might help you. – sno2 Sep 04 '21 at 15:59
  • Thanks, you wrote "If you do want it to still scroll to it, then you must add some JS". There is no if, scrolling there is what I want, scrolling was and still is my question. Could you advise about the JS you were referring to? Many thanks – bgukw Sep 04 '21 at 16:10
  • @bgukw Personally, I think it's expected behavior to not scroll to an element removed from the active DOM at the moment. If you want to scroll to something, then you must ensure it is available to actually scroll to. You can do this via JS by adding a `click` event on the `a` tag and then adding the `open` attribute to the `details` tag. – sno2 Sep 04 '21 at 16:14
  • I respect your opinion that my expectation was unjustified, I still want to enable scrolling to anchors within closed details. Many thanks for outlining a javascript solution, but I don't know JS well enough. If you could enhance my above HTML with the JS that you outlined I would accept that as a solution to my question. – bgukw Sep 04 '21 at 19:39
0

A draft step towards the solution:

var details = [...document.getElementsByTagName("details")];
document.addEventListener('click', function(e) {
  details.forEach( (D,_,A) => D.contains(e.target) ? D.addAttribute('open') : '')
})

However, instead of e.target somehow the targeted anchor should be used.

Iterating over all details has the advantage that in case the anchor is inside multiple closed blocks they will all open up.

bgukw
  • 51
  • 4