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