toggle.html

// TOGS????

<section class="js-toggle-group">
  <nav>
    <button
      data-toggle="one"
      class="js-toggle-link">
      One
    </button>
    <button
      data-toggle="two"
      class="js-toggle-link">
      Two
    </button>
  </nav>

  <main>
    <article
      data-toggle="one"
      class="js-toggle-panel">
      One
    </article>
    <article
      data-toggle="two"
      class="js-toggle-panel">
      Two
    </article>
  </main>
</section>

<script>
  import {$, closest} from './helpers'

  const setActive = (links, panels, id) => {
    let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
    let activeLink = links.filter(link => link.getAttribute('data-toggle') == id)
    activePanel.forEach(panel => panel.classList.add('active'))
    activeLink.forEach(panel => panel.classList.add('active'))
  }

  const removeActive = (nodes) => {
    nodes.forEach(node => node.classList.remove('active'))
  }

  const handler = (event) => {
    event.preventDefault()
    // get the dom node of the parent of the target
    let group = closest('js-toggle-group', event.target)
    let id = event.target.getAttribute('data-toggle')
    let panels = $('js-panel', group)
    let links = $('js-link', group)
    removeActive(panels)
    removeActive(links)
    setActive(links, panels, id)
  }

  const init = () => {
    let links = $('.js-toggle-link')
    links.forEach(link => link.addEventListener('click', handler))
  }

</script>