@uqds/accordion
Version:
Accordion component
1 lines • 2.4 kB
JavaScript
var uq=(t=>{class i{constructor(t){this.className=t||"uq-accordion",this.init()}static getNextSibling(t,e){let s=t.nextElementSibling;if(!e)return s;for(;s;){if(s.matches(e))return s;s=s.nextElementSibling}}static getPrevSibling(t,e){let s=t.previousElementSibling;if(!e)return s;for(;s;){if(s.matches(e))return s;s=s.previousElementSibling}}slideContentUp(t){let e=i.getNextSibling(t,`.${this.className}__content`);t.classList.remove(this.className+"__toggle--active"),t.parentNode.classList.remove(this.className+"__item--is-open"),t.setAttribute("aria-expanded","false"),e.style.height="0px",e.addEventListener("transitionend",()=>{e.classList.remove(this.className+"__content--active")},{once:!0}),e.setAttribute("aria-hidden","true")}slideContentDown(t){let e=i.getNextSibling(t,`.${this.className}__content`),s=(t.classList.add(this.className+"__toggle--active"),t.parentNode.classList.add(this.className+"__item--is-open"),t.setAttribute("aria-expanded","true"),e.classList.add(this.className+"__content--active"),e.style.height="auto",e.clientHeight+"px");e.style.height="0px",setTimeout(()=>{e.style.height=s},0),e.setAttribute("aria-hidden","false")}slideUpOthers(e,t){Array.from(t).filter(t=>t!==e&&t.classList.contains(this.className+"__toggle--active")).forEach(t=>{this.slideContentUp(t)})}handleToggle(e){return t=>{t.preventDefault();t=t.target.closest(`.${this.className}__toggle`);t.classList.contains(this.className+"__toggle--active")?this.slideContentUp(t):t.closest("."+this.className).classList.contains(this.className+"--is-manual")?this.slideContentDown(t):(this.slideContentDown(t),this.slideUpOthers(t,e))}}init(){window.location.hash&&(this.hash=window.location.hash),this.hash&&""!==this.hash&&(t=document.querySelector(`${this.hash}.${this.className}__content`))&&(t=i.getPrevSibling(t,`.${this.className}__toggle`),this.slideContentDown(t),window.scrollTo(0,t.getBoundingClientRect().top));var t=document.querySelectorAll(`.${this.className}:not([data-accordion-init])`),e=document.querySelectorAll(`.${this.className}:not([data-accordion-init]) .${this.className}__content`);t.forEach(t=>{t.dataset.accordionInit="";let e=t.querySelectorAll(`.${this.className}__toggle`);e.forEach(t=>{t.addEventListener("click",this.handleToggle(e))})}),e.forEach(t=>{t.innerHTML=`<div class ="${this.className}__content-wrapper">${t.innerHTML}</div>`})}}return t.accordion=i,t})({});