Add deeplink anchors

Author: theletterf

docs/syntax/dropdowns.md

@@ -10,6 +10,7 @@ Dropdowns allow you to hide and reveal content on user interaction. By default,
 ::::{tab-item} Output
 
 :::{dropdown} Dropdown Title
+:name: basic-dropdown
 Dropdown content
 :::
 
@@ -18,6 +19,7 @@ Dropdown content
 ::::{tab-item} Markdown
 ```markdown
 :::{dropdown} Dropdown Title
+:name: basic-dropdown
 Dropdown content
 :::
 ```
@@ -35,6 +37,7 @@ You can specify that the dropdown content should be visible by default. Do this
 
 :::{dropdown} Dropdown Title
 :open:
+:name: open-dropdown
 Dropdown content
 :::
 
@@ -44,9 +47,56 @@ Dropdown content
 ```markdown
 :::{dropdown} Dropdown Title
 :open:
+:name: open-dropdown
 Dropdown content
 :::
 ```
 ::::
 
 :::::
+
+## Deeplinking
+
+Dropdowns support deeplinking via anchor links. When you navigate to a URL with a hash that points to a dropdown or content within a dropdown, the dropdown will automatically open.
+
+:::::{tab-set}
+
+::::{tab-item} Output
+
+:::{dropdown} Deeplink Example
+:name: deeplink-example
+
+This dropdown can be opened by navigating to `#deeplink-example`.
+
+#### Nested Content [#nested-content]
+
+You can also link directly to content within dropdowns. This content has the anchor `#nested-content`.
+
+:::
+
+Test links:
+- [Link to dropdown](#deeplink-example)
+- [Link to nested content](#nested-content)
+
+::::
+
+::::{tab-item} Markdown
+```markdown
+:::{dropdown} Deeplink Example
+:name: deeplink-example
+
+This dropdown can be opened by navigating to `#deeplink-example`.
+
+#### Nested Content [#nested-content]
+
+You can also link directly to content within dropdowns. This content has the anchor `#nested-content`.
+
+:::
+
+Test links:
+- [Link to dropdown](#deeplink-example)
+- [Link to nested content](#nested-content)
+```
+::::
+
+:::::

docs/testing/nested/index.md

@@ -11,3 +11,10 @@ The files in this directory are used for testing purposes. Do not edit these fil
 ## Injecting a {{x}} is supported in headers.
 
 This should show up in the file's table of contents too.
+
+:::{dropdown} Dropdown Title
+:name: dropdown-title
+
+Text.
+
+:::

src/Elastic.Documentation.Site/Assets/main.ts

@@ -2,7 +2,7 @@ import { initCopyButton } from './copybutton'
 import { initHighlight } from './hljs'
 import { initImageCarousel } from './image-carousel'
 import './markdown/applies-to'
-import { openDetailsWithAnchor } from './open-details-with-anchor'
+import { initOpenDetailsWithAnchor } from './open-details-with-anchor'
 import { initNav } from './pages-nav'
 import { initSmoothScroll } from './smooth-scroll'
 import { initTabs } from './tabs'
@@ -31,7 +31,7 @@ document.addEventListener('htmx:load', function (event) {
         initNav()
     }
     initSmoothScroll()
-    openDetailsWithAnchor()
+    initOpenDetailsWithAnchor()
     initImageCarousel()
 
     const urlParams = new URLSearchParams(window.location.search)

src/Elastic.Documentation.Site/Assets/open-details-with-anchor.ts

@@ -1,23 +1,29 @@
-import { UAParser } from 'ua-parser-js'
-
-const { getBrowser } = new UAParser()
-
-// This is a fix for anchors in details elements in non-Chrome browsers.
+// Opens details elements (dropdowns) when navigating to an anchor link within them
+// This enables deeplinking to collapsed dropdown content
 export function openDetailsWithAnchor() {
     if (window.location.hash) {
         const target = document.querySelector(window.location.hash)
         if (target) {
             const closestDetails = target.closest('details')
             if (closestDetails) {
-                const browser = getBrowser()
-                if (browser.name !== 'Chrome') {
-                    closestDetails.open = true
+                closestDetails.open = true
+                // Small delay to ensure the details element is open before scrolling
+                setTimeout(() => {
                     target.scrollIntoView({
-                        behavior: 'instant',
+                        behavior: 'smooth',
                         block: 'start',
                     })
-                }
+                }, 50)
             }
         }
     }
 }
+
+// Initialize the anchor handling functionality
+export function initOpenDetailsWithAnchor() {
+    // Handle initial page load
+    openDetailsWithAnchor()
+    
+    // Handle hash changes within the same page (e.g., clicking anchor links)
+    window.addEventListener('hashchange', openDetailsWithAnchor)
+}