Automatically Open Element On ID Call

I'm trying to automatically open a element when a containing is called by ID, for example: http://www.example.com/page.html#container. Ideally I'd like this to scroll to the poin

Solution 1:

I don't think you can open <details> with CSS alone. But you can:

1. Get the hash with location.hash. Possibly listen to hashchange event.
2. Use document.getElementById to get the element.
3. Set its open property to true.

function openTarget() {
  var hash = location.hash.substring(1);
  if(hash) var details = document.getElementById(hash);
  if(details && details.tagName.toLowerCase() === 'details') details.open = true;
}
window.addEventListener('hashchange', openTarget);
openTarget();

:target {
  background: rgba(255, 255, 200, .7);
}

<details id="foo">Details <summary>Summary</summary></details>
<div><a href="#foo">#foo</a> <a href="#bar">#bar</a></div>

Solution 2:

Below I provide solution that works for nested <details><summary> elements:

With help of javascript you can:

• track changes of hash anchor in url
• react to them by changing open attribute of details elements accordingly

Here is example that does it, code here → https://stackoverflow.com/a/55377750/544721