CSS Accordion animation

In web development, accordions are a commonly used UI pattern for displaying content in a collapsible format, making them ideal for menus, FAQs, and content-heavy websites. What makes this accordion animation particularly interesting is that it relies mostly on CSS, with minimal JavaScript to toggle the visibility of the content. In this post, we'll dive into the technical implementation of a simple accordion animation with code examples, starting from a basic single-accordion design and then expanding it to include multiple accordions and improved styling.

The first step in creating a collapsible accordion involves both HTML structure and minimal CSS for the styling and animations. Let's break down the code:

HTML Structure:

• <div class="accordion">: This div encapsulates the entire accordion element.
• <div class="accordion__title">: The title section of the accordion, which will be clicked to trigger the reveal of the hidden content.
• <div class="accordion__dropdown">: The hidden content that will expand and contract based on the user’s interaction.

JavaScript Functionality:

• The JavaScript part here is incredibly simple. We use querySelector to target the .accordion__title element and attach an event listener that listens for the click event.
• When the title is clicked, we toggle the accordion--visible class on the parent .accordion div. This class will control the visibility and height of the hidden content.

CSS Styling and Transitions:

• The accordion container is set to use display: grid, which allows us to define the row sizes with grid-template-rows. Initially, the dropdown content (.accordion__dropdown) has a height of 0 (effectively hidden) and visibility: hidden.
• When the .accordion--visible class is added, the grid-template-rows property changes, and the dropdown content becomes visible with a smooth transition (transition: all 0.4s ease).
• This makes the hidden content smoothly expand into view when toggled.

Now let's take it a step further by handling multiple accordion elements on the same page. This requires slightly more intricate HTML structure and some additional styling to ensure that the accordions work seamlessly.

Multiple Accordions:

• This time, we have multiple accordion containers on the page. Each container has a .accordion__title and a .accordion__dropdown section, making the content collapsible on an individual basis.

JavaScript Enhancement:

• In this case, the script now uses querySelectorAll to grab all the accordion titles (.accordion__title) and attach event listeners to each of them. This ensures that all accordions on the page are interactive.

Styles enhancement

• An icon that rotates based on the state has been added to show if the dropdown is visible or not. We have used Eva Icons for this example.

In a real-world application, you can further optimize the design by adding features like automatic collapsing of other accordions when one is opened or using aria-expanded attributes for better accessibility.

This technique demonstrates the power of modern CSS and its ability to create interactive elements with almost no JavaScript.