Opening a Details Element from the URL

"I was doing just this recently, and my first thought was to do it server-side. If the URL was like website.com/#faq-1 I'd see if faq-1 matches an ID of the details element and I'd put the open attribute on it like <details id="faq-1" open>. But no, you don't get to have the #hash as part of the URL server side (for whatever reason 🤷‍♀️)."

"Then I was reminded you don't need to do this at all. What you need is (drumroll)... HTML. The trick is hash-linking to an element inside the <details>. So like: Now, if you hash-link to #faq-1, the browser will know that it has to open that <details> in order for it to be seen, so it does. You don't normally need a <div> wrapper or anything inside the details element, but we're doing it here as it's obviously handy."

Hash-linking to an element inside a <details> causes the browser to open that <details> automatically when the URL contains the fragment identifier. Fragment identifiers are not available server-side, so adding an open attribute server-side cannot rely on the hash. JavaScript can read window.location.hash and open a matching <details>, but that is unnecessary. Giving an inner element an id and linking to that id makes the browser expand the parent <details> so the target becomes visible. No wrapper is required, though an inner element is convenient. Apply :target-based CSS to highlight and offset the matched element for visibility.

Read at Frontendmasters