DEV Community

loading...

Expand a card element on click

Riri
Web Developer
Updated on ・1 min read

A simple CSS & JavaScript implementation of expanding a card on click. Figuring out how to animate the expansion was relatively easy, but I had a hard time implementing the de-animation (going from expanded to collapsed). In the end, I had to add a default opacity: 0 to the very first state when nothing has happened yet, and then later on add a expanded class when expanded, and unexpanded class when unexpanded (for the de-animation).

Comments are welcome 😊 I still consider myself a front-end dev newbie so I need all the help I can get. I'm having a particularly hard time putting BEM into practice, but I tried with this one (did I even do it right?).


If you found this useful, consider buying me a coffee.

Discussion (0)

Forem Open with the Forem app