Animated Accordion - No Frameworks, Just CSS and JS

Solution retrospective
So creating this without any animation is simple enough. The challenge came when I decided I wanted the accordion to animate when closing/opening each element. Lucky for me, I came across this issue before, and already had a solution for it.
The main issue is that height is not supported for animation, so most alternative solutions may involve quite a bit of JavaScript to setup a timer and then adjust the height by pixel. I didn't like that idea, though, and discovered that you can actually animate height using CSS grid.
So I have this element:
Is Frontend Mentor free? Yes, Frontend Mentor offers both free and premium coding challenges, with the free option providing access to a range of projects suitable for all skill levels.
Whenever I click the button, I want that div with card-paragraph-wrapper to appear. I have this CSS to make that happen with an animation:
.card-paragraph-wrapper { display: grid; transition: grid-template-rows 0.15s ease-out; } .card-paragraph-wrapper[data-active='true'] { grid-template-rows: 1fr; } .card-paragraph-wrapper[data-active='false'] { grid-template-rows: 0fr; } .card-paragraph-wrapper > div { overflow: hidden; }
The only particularly odd thing is you need the extra div in there. It does not work without it.
Then you simply add event listeners to change the data-active to true or false in your script, and the CSS takes care of itself.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Mubarak-Adeyemi
I had the same issue but I used this line of code to solve just that in JavaScript 👇.
answer.style.maxHeight = answer.scrollHeight + "px";
After I had set the answer max-height to 0 in CSS.
then I used the above code to determine the height of the answer container for smooth transition after a certain class has been added with JavaScript to show the container.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord