{"id":7019,"date":"2025-08-26T19:15:23","date_gmt":"2025-08-27T00:15:23","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7019"},"modified":"2025-08-26T19:15:24","modified_gmt":"2025-08-27T00:15:24","slug":"opening-a-details-element-from-the-url","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/opening-a-details-element-from-the-url\/","title":{"rendered":"Opening a Details Element from the URL"},"content":{"rendered":"\n

Say you’ve got a page with a bunch of <details><\/code> elements on it. <\/p>\n\n\n\n

Your goal is to be able to send someone to that page with one particular details element open.<\/em><\/p>\n\n\n\n

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<\/code> I’d see if faq-1<\/code> matches an ID of the details element and I’d put the open attribute on it like <details id=\"faq-1\" open><\/code>. But no, you don’t get to have the #hash<\/code> as part of the URL server side (for whatever reason \ud83e\udd37\u200d\u2640\ufe0f). <\/p>\n\n\n\n

Then I started writing JavaScript to do it, where you definitely can access the hash (window.location.hash<\/code>). I’d just querySelector<\/code> for the hash and if I found a matching details element, I’d open it up.<\/p>\n\n\n\n

Then I was reminded you don’t need to do this at all. What you need is (drumroll)… HTML. <\/p>\n\n\n\n

The trick is hash-linking to an element inside<\/em> the <details><\/code>. So like:<\/p>\n\n\n

<details<\/span>><\/span>\n  <summary<\/span>><\/span>What was Rosebud in Citizen Kane?<\/summary<\/span>><\/span>\n  <div<\/span> id<\/span>=\"faq-1\"<\/span>><\/span>A sled.<\/div<\/span>><\/span>\n<\/details<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Now, if you hash-link to #faq-1<\/code>, the browser will know that it has<\/em> to open that <details><\/code> in order for it to be seen, so it does. You don’t normally need<\/em> a <div><\/code> wrapper or anything inside the details<\/code> element, but we’re doing it here as it’s obviously handy.<\/p>\n\n\n\n
Here’s a demo of a page that is set up in this way:<\/p>\n\n\n\n