Vue custom directive

by batcave

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="vue">
  <div v-accordion class="accordion">
    <div class="accordion__item">
      <div class="accordion__toggler js-accordion-toggler">read more about...</div>
      <div class="accordion__content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, cumque.
      </div>
    </div>
    
    <div class="accordion__item">
      <div class="accordion__toggler js-accordion-toggler">how this works...</div>
      <div class="accordion__content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, cumque.
      </div>
    </div>
    
    <div class="accordion__item">
      <div class="accordion__toggler js-accordion-toggler">toggle you bitches</div>
      <div class="accordion__content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, cumque.
      </div>
    </div>
  </div>
</div>

CSS

.accordion {
  width: 20rem;
}

.accordion__toggler {
  padding: .5rem;
  background-color: deepskyblue;
  cursor: pointer;
}

.accordion__content {
  display: none;
  padding: .5rem;
  background-color: #ededed;
}

.accordion__item--is-open .accordion__content {
  display: block;
}

JavaScript

Vue.directive('accordion', {
  bind(el, binding, vnode) {
    const togglers = el.querySelectorAll('.js-accordion-toggler')

    for (const toggler of togglers) {
      toggler.addEventListener('click', function() {
				toggler.parentElement.classList.toggle('accordion__item--is-open')
      })
    }
  }
})

new Vue({
  el: '#vue'
})