diff --git a/docs/index.css b/docs/index.css index ffd055c..24ae81d 100755 --- a/docs/index.css +++ b/docs/index.css @@ -265,6 +265,11 @@ body { .faq { box-sizing: content-box; overflow-x: auto; + +} + +.faq:target { + border-color: var(--blue-50) !important; } .faq__summary { @@ -275,6 +280,7 @@ body { -webkit-user-select: none; user-select: none; } + .faq__content { max-width: 70rem; padding: 2rem; diff --git a/docs/index.js b/docs/index.js index 84d40e6..0a854ea 100644 --- a/docs/index.js +++ b/docs/index.js @@ -1,5 +1,19 @@ "use strict"; +// Set FAQ fragment IDs +for (const faq of document.querySelectorAll(".faq")) { + const summary = faq.querySelector(".faq__summary"); + const formattedSummary = summary.textContent.trim().replace(/ /g, "_"); + + faq.id = formattedSummary; + + if (window.location.hash) { + faq.open = decodeURIComponent( + window.location.hash.slice(1)) === formattedSummary; + } +} + + function updateThemeClass (mediaQuery) { if (mediaQuery.matches) { document.documentElement.classList.remove("theme-dark");