Accordions plugin by vanilla JS

accordions.js

new class Accordions {

   constructor() {
      this.$wrapper;
      this.$trigger;
      this.$content;
      this.init();
   }

   init() {
      document.querySelectorAll('[data-accordion]').forEach((wrapper) => {
         this.$wrapper = wrapper;
         this.$trigger = wrapper.querySelector(['[data-trigger]']);
         this.$content = wrapper.querySelector(['[data-content]']);
         this.setStyle();
         this.addListenerClick();

         if (wrapper.hasAttribute('data-active')) {
            this._toggleAccordion();
            this.$content.style.transition = 'none';
         }
      });
   }

   setStyle() {
     this.$content.style.overflow = 'hidden';
     this.$content.style.willChange = 'max-height';
     this.$content.style.maxHeight = '0px';
     this.$content.style.transition = 'max-height 0.3s ease-out';
   }

   addListenerClick() {
     this.$trigger.addEventListener('click', this.clickAccordion.bind(this));
   }

   clickAccordion(event) {
      event.preventDefault();

      this.$wrapper = event.target.closest('[data-accordion]')
      this.$trigger = this.$wrapper.querySelector(['[data-trigger]']);
      this.$content = this.$wrapper.querySelector(['[data-content]']);

      this._toggleAccordion();
   }

   _toggleAccordion() {
      this.$content.style.transition = 'max-height 0.3s ease-out';

      this.$trigger.classList.toggle('active');
      this.$content.classList.toggle('active');

      this.$content.style.maxHeight = this.$content.style.maxHeight == '0px' ? `${this.$content.scrollHeight}px` : '0px';
   }
}

~example.html

<div class="accordion" data-accordion data-active>
    <div class="accordion__trigger" data-trigger>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    <div class="accordion__content" data-content>
        Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Mollitia fugit id similique perferendis? Possimus eum id accusamus
        eos cum dignissimos hic est aut minima ullam corrupti, sapiente obcaecati officia ipsa
        vel sint ipsum eveniet saepe numquam quas, porro ad temporibus alias. Provident fuga autem
        ut quisquam voluptas fugit explicabo fugiat?
    </div>
</div>
<div class="accordion" data-accordion>
    <div class="accordion__trigger" data-trigger>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    <div class="accordion__content" data-content>
        Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Mollitia fugit id similique perferendis? Possimus eum id accusamus
        eos cum dignissimos hic est aut minima ullam corrupti, sapiente obcaecati officia ipsa
        vel sint ipsum eveniet saepe numquam quas, porro ad temporibus alias. Provident fuga autem
        ut quisquam voluptas fugit explicabo fugiat?
    </div>
</div>

~readme.md

This is plugin which makes work with layout your project easier.

Anything you need is set needed data-attributes.

• data-accordion - main container
• data-trigger - container for header (listening onclick)
• data-content - container for content (opens on click)
• data-active - if should be active initially

https://codepen.io/mmarienko/pen/ZEqbLNB