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
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'; | |
} | |
} |
<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> |
https://codepen.io/mmarienko/pen/ZEqbLNB