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
- Initial State: The
accordion__wrapper
starts with agrid-template-rows
value of0fr
, effectively hiding the content. The transition property ensures that any changes to this value are animated smoothly over 300ms. - Open State: When the header is clicked, the
accordion__wrapper--open
class is toggled, changing thegrid-template-rows
to1fr
, which allows the content to expand based on its height. - Content Overflow: The
accordion__content
hasoverflow: 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.