Animated Accordion - No Frameworks, Just CSS and JS

What are you most proud of, and what would you do differently next time?

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.