Like slideToggle from jquery but cooler

vanilla-js-accordion.js

import loopQuery from '../tools/loopQuery' // https://gist.github.com/shelldandy/da437ea6a134dca26a4ceec42b88e893
import { faqs } from 'styles'

const accordion = ({
  activeClass = 'js-accordion-active',
  // The whole accordion
  accordionSelector = '[data-accordion]',
  // The part of the accordion that shrinks and shows
  contentSelector = '[data-content]',
  // The part of the accordion you click
  accordionTrigger = '[data-trigger]',
}) => {
  const accordions = document.querySelectorAll(accordionSelector)

  loopQuery(accordions, accordion => {
    const content = accordion.querySelector(contentSelector)
    content.style.maxHeight = '0'
    content.style.overflow = 'hidden'
    content.style.transition = '0.25s'

    const button = accordion.querySelector('[data-trigger]')
     // I think this can be improved by adding a single eventListener
    // to a container defaulting to window instead of every accordion
    button.addEventListener('click', event => {
      accordion.classList.toggle(activeClass)

      content.style.maxHeight = accordion.classList.contains(activeClass)
        ? `${content.scrollHeight}px`
        : '0'
    })
  })
}

export default accordion