Creating a Dynamic Height Accordion with CSS Grid

Accordions are a popular UI component in web development that allow you to show and hide sections of content with a smooth transition. They are especially useful for organizing information in a way that saves space and improves user experience. However, implementing accordions can sometimes be tricky, especially when it comes to managing dynamic content height. In this blog post, we’ll explore how to create a dynamic height accordion using CSS Grid and JavaScript, allowing the content to expand and collapse smoothly based on its height and preserving transition.

Creating the Accordion Structure

Let’s start by setting up the HTML structure for our accordion. We’ll have a main container with an accordion header and a wrapper for the content. Inside the wrapper, we’ll place the content elements.

<div class="accordion">
  <div class="accordion__header">x</div>
  <div class="accordion__wrapper">
    <div class="accordion__content">
      <div class="accordion__content__element">test1</div>
      <div class="accordion__content__element">test2</div>
      <div class="accordion__content__element">test3</div>
      <div class="accordion__content__element">test4</div>
      <!-- ... -->
    </div>
  </div>
</div>

Styling the Accordion

Next, we’ll style the accordion using CSS Grid. The key here is to use the grid-template-rows property to control the height of the content wrapper. We'll start with a closed state where the content is hidden, and transition to an open state where the content is visible.

.accordion__wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
  background-color: #D3E3FD;
}

.accordion__content {
  overflow: hidden;
}

.accordion__header {
  cursor: pointer;
}

.accordion__wrapper--open {
  grid-template-rows: 1fr;
}

Adding Interactivity with JavaScript

To make the accordion interactive, we’ll use JavaScript to toggle the open state when the header is clicked. This involves adding an event listener to the header and toggling a class on the wrapper.

const accordionHeader = document.querySelector('.accordion__header');
accordionHeader.addEventListener('mouseup', () => {
  const content = document.querySelector('.accordion__wrapper');
  content.classList.toggle('accordion__wrapper--open');
});

How It Works

1. Initial State: The accordion__wrapper starts with a grid-template-rows value of 0fr, effectively hiding the content. The transition property ensures that any changes to this value are animated smoothly over 300ms.
2. Open State: When the header is clicked, the accordion__wrapper--open class is toggled, changing the grid-template-rows to 1fr, which allows the content to expand based on its height.
3. Content Overflow: The accordion__content has overflow: hidden, ensuring that any overflowing content is hidden when the accordion is closed.

Conclusion

By leveraging CSS Grid and JavaScript, we can create a dynamic height accordion that provides a smooth user experience. This approach not only simplifies the code but also ensures that the accordion adapts to varying content heights seamlessly. Whether you’re building a FAQ section, a collapsible menu, or any other expandable content, this technique will enhance the functionality and aesthetics of your web project. Happy coding!

You can find the working solution on this codepen.