oncode / handorgel

Accessible W3C conform accordion written in ES6.
https://oncode.github.io/handorgel/
MIT License
261 stars 25 forks source link

Can I open an accordion using an external trigger? #11

Closed katebp closed 5 years ago

katebp commented 5 years ago

I have the footnotes for a financial table hidden inside an accordion. It works great, but I want to be able to anchor the notes in the table down to the accordion, which will then open.

(The functionality of how the accordion opens is less important than it opening.)

I realise this may be outside of the accordion's scope, but thanks for getting this far.

oncode commented 5 years ago

Yes this it out of scope, but you should be able to implement it with something like this:

const handorgel = new Handorgel(...)

document.querySelector('[footnotes-link]').addEventListener('click', () => {
  const header = document.querySelector('[footnotes-fold-header]') // e.g. your h3
  const transition = true

  if (header.handorgelFold.expanded) { // fold is open
    // scroll directly to it
    yourScrollToFunction(header)
  } else {
    // scroll to fold after it has been opened to be sure get the right position
    handorgel.once('fold:opened', () => {
      yourScrollToFunction(header)
    })

    header.handorgelFold.open(transition)
});
katebp commented 5 years ago

Wondeful, thanks! I'll give it a go.