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.
Top comments (1)
Hello,
i have an issue in the expanded section, my question is that if you want to expand and unexpand the card by clicking in the profile, not by whole the card, what we should do in this case,
thank u i am looking forword for your help.