toggle.wickedelement.js

import { define } from 'wicked-elements'

/**
 * Toggles open class on target element on toggle click
 */

define('[data-component~="toggle"]', {
  init () {
    this.target = this.element.getAttribute('data-target')
    this.toggle = this.toggle.bind(this)

    this.targetElement = this.target === 'nextSibiling'
      ? this.element.nextElementSibling
      : document.querySelector(`[data-ref="${this.target}"]`)
  },
  connected () {
    this.element.addEventListener('click', this.toggle)
  },
  disconnected () {
    this.element.removeEventListener('click', this.toggle)
  },
  toggle () {
    this.element.classList.toggle('open')
    this.targetElement.classList.toggle('open')
  }
})