const PADDING = 20; const createStyle = () => { const styleElement = document.createElement('style'); styleElement.innerHTML = ` .init { overflow: hidden; transition: all 0.5s ease-out; } .closed { transform: rotate(0); transition: transform 0.3s ease-out; } .closed:hover { fill: "#116dff"; } .active { transform: rotate(45deg); transition: transform 0.3s ease-out; } .active:hover { fill: "#116dff"; } `; return styleElement; }; class AnimationEffect extends HTMLElement { constructor() { super(); this.targetIds = []; } connectedCallback() { const style = createStyle(); document.head.appendChild(style); } show(panel) { panel.style.padding = PADDING; panel.style.maxHeight = panel.scrollHeight + PADDING + "px"; panel.style.marginBottom = PADDING; const svg = panel.parentElement.querySelector('svg'); svg.classList.toggle('active'); } hide(panel) { panel.style.padding = "0px"; panel.style.maxHeight = "0px"; const svg = panel.parentElement.querySelector('svg'); svg.classList.remove('active'); } attributeChangedCallback(prop, oldVal, newValue) { if (prop === 'toggle') { const [targetId] = newValue.split(','); this.targetIds.forEach(id => { const panel = document.getElementById(id); if (id === targetId) { const hasMaxHeight = panel.style.maxHeight !== "0px"; hasMaxHeight ? this.hide(panel) : this.show(panel); } else { this.hide(panel); } }) } if (prop === 'init') { const targetIds = newValue.split(','); this.targetIds = targetIds; targetIds.forEach((target, idx) => { const panel = document.getElementById(target); if (!panel) return; panel.classList.add('init'); panel.style.maxHeight = 0; panel.style.padding = 0; const svg = panel.parentElement.querySelector('svg'); svg.classList.add('closed'); }); } } static get observedAttributes() { return ['init', 'toggle'] } } customElements.define('accordion-animate', AnimationEffect);
top of page
News & Insights
News/Events/Blogs
1
2
bottom of page