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