// show element const show = (e) => { const getHeight = () => { e.style.display = 'block'; const height = e.scrollHeight + 'px'; e.style.display = ''; return height; }; const height = getHeight(); e.classList.add('is-visible'); e.style.height = height; window.setTimeout(() => { e.style.height = ''; }, 350); }; // hide element const hide = (e) => { e.style.height = e.scrollHeight + 'px'; //set height back to 0 window.setTimeout(() => { e.style.height = '0'; }, 1); window.setTimeout(() => { e.classList.remove('is-visible'); }, 350); } const toggle = (e) => { if(e.classList.contains('is-visible')) { hide(e); return; } show(e); }; //listen for click event document.addEventListener('click', event => { //make sure clicked element is our toggle if(!event.target.classList.contains('toggle')) return; //Prevent default link behavior event.preventDefault(); const content = document.querySelector(event.target.hash); if(!content) return; //toggle the content toggle(content); }, false);