@three11/accordion
Version:
Front-end Accordion widget using max-height
3 lines (2 loc) • 1.67 kB
JavaScript
function t(){return t=Object.assign?Object.assign.bind():function(t){for(var s=1;s<arguments.length;s++){var i=arguments[s];for(var e in i)Object.prototype.hasOwnProperty.call(i,e)&&(t[e]=i[e])}return t},t.apply(this,arguments)}class s{constructor(s,i={}){var e,h;return this.el=void 0,this.head=void 0,this.body=void 0,this.height=0,this.isOpen=!1,this.settings=void 0,this.defaultSettings={headSelector:"[data-title]",bodySelector:"[data-content]",hiddenClass:"is--hidden",activeClass:"is--active"},this.settings=t({},this.defaultSettings,i),this.el=s,this.head=(null==(e=this.el)?void 0:e.querySelector(this.settings.headSelector))||null,this.body=(null==(h=this.el)?void 0:h.querySelector(this.settings.bodySelector))||null,this.bind().close(),this}bind(){return this.head&&this.head.addEventListener("click",this.toggle.bind(this)),this.body&&this.body.addEventListener("transitionend",()=>{!this.isOpen&&this.el&&this.el.classList.add(this.settings.hiddenClass)}),this}setHeight(t){return setTimeout(()=>{this.body&&(this.body.style.maxHeight=`${t}px`)},1),this}toggle(){var t;return this.height=(null==(t=this.body)?void 0:t.scrollHeight)||0,this.isOpen?this.close():this.open(),this}close(){return this.isOpen=!1,this.el&&this.el.classList.remove(this.settings.activeClass),this.body&&(this.body.style.maxHeight=`${this.height}px`),this.setHeight(0),this}open(){return this.isOpen=!0,this.el&&(this.el.classList.add(this.settings.activeClass),this.el.classList.remove(this.settings.hiddenClass)),this.body&&(this.body.style.maxHeight="0px"),this.setHeight(this.height),this}}export{s as Accordion,s as default};
//# sourceMappingURL=accordion.modern.js.map