docs/javascripts/dev-toc.js at main · NoraHansen/docs · GitHub

39 lines (32 loc) · 1.25 KB

const expandText = 'Expand All'

const closeText = 'Close All'

export default function devToc () {

const expandButton = document.querySelector('.js-expand')

if (!expandButton) return

const detailsElements = document.querySelectorAll('details')

expandButton.addEventListener('click', () => {

// on click, toggle all the details elements open or closed

const anyDetailsOpen = Array.from(detailsElements).find(details => details.open)

for (const detailsElement of detailsElements) {

anyDetailsOpen

? detailsElement.removeAttribute('open')

: detailsElement.open = true

}

// toggle the button text on click

anyDetailsOpen

? expandButton.textContent = expandText

: expandButton.textContent = closeText

})

// also toggle the button text on clicking any of the details elements

for (const detailsElement of detailsElements) {

detailsElement.addEventListener('click', () => {

expandButton.textContent = closeText

// we can only get an accurate count of the open details elements if we wait a fraction after click

setTimeout(() => {

if (!Array.from(detailsElements).find(details => details.open)) {

expandButton.textContent = expandText

}

}, 50)

})

}

Expand file tree