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
Last active
April 11, 2023 23:04
-
-
Save mmarienko/c76eac6d5b41544e028da5b897bc4809 to your computer and use it in GitHub Desktop.
Accordions plugin by vanilla JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://codepen.io/mmarienko/pen/ZEqbLNB