[Feature request] Automatically open details block if it matches URL anchor

[thdoan]

Is your feature request related to a problem? Please describe.

On my FAQ page I have a set of Q&A like this:

::: details 100. Some question blah blah blah? {#q100}
Some answer blah blah blah.
:::

On some other page I'd like to link to FAQ 100 and have it automatically open for the user to read. On a FAQ page, it can be hard to track which Q&A item you're jumping to even after the page has scrolled to it, so automatically opening the relevant details block improves the user experience here.

Describe the solution you'd like

Let's say you go to URL /faq#q100. The details block with {#q100} (id="q100") should automatically have the open attribute applied to it.

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[thdoan]

Pardon my newbie ignorance -- I realized I can do everything I need to do by adding logic in <script>...</script> in the MD file itself. Feel free to close if this feature request is not planned.

[brc-dd]

Yeah.

# FAQs

:::details question 1 {#q1}
answer 1
:::

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  window.addEventListener('hashchange', openTarget)
  openTarget()
})

onUnmounted(() => {
  window.removeEventListener('hashchange', openTarget)
})

function openTarget() {
  const hash = location.hash.substring(1)
  const details = hash && document.getElementById(hash)
  if (details && details.tagName.toLowerCase() === 'details') details.open = true
}

// https://stackoverflow.com/a/37033774/11613622
</script>