Animated JavaScript Accordion

While pure CSS accordions are great, animating the height dynamically often requires JavaScript to calculate the exact scrollHeight of the content block so it smoothly slides down.

The JavaScript Logic

const headers = document.querySelectorAll('.acc-header');

headers.forEach(header => {
  header.addEventListener('click', () => {
    // Close others
    document.querySelectorAll('.acc-content').forEach(content => {
      content.style.maxHeight = null;
    });

    const content = header.nextElementSibling;
    
    // Toggle current
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
});

See the Live Demo to experience the buttery smooth CSS transitions!