const accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach((accordionHeader) => { accordionHeader.addEventListener('click', () => { accordionContent = accordionHeader.nextElementSibling; const height = accordionContent.scrollHeight; accordionHeader.classList.toggle('active-header'); if (accordionHeader.classList.contains('active-header')) { accordionContent.style.maxHeight = `${height}px`; } else { accordionContent.style.maxHeight = '0px'; } }); });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter