FAQ Accordion | Vue3 - Typescript - Scss - Vitest

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

Hello everyone! This is my solution to the FAQ Accordion.

I chose this project after discovering a CSS trick on YouTube that animates dropdown items using CSS grid. It seemed like the perfect opportunity to experiment with this technique!

Previously, I thought there wasn’t a good way to add a transition when animating the height of a block. But the solution turned out to be using CSS grid, as you can transition grid-template-rows (see more in the README).

I hope you enjoy it 😊

Feel free to let me know if you find any bugs or glitches, or if you have any suggestions for improvements.

Have a great day/night. Peace! 😊

What challenges did you encounter, and how did you overcome them?

Since it was a simple project, I took the opportunity to write unit tests using Vitest. Having used Jest in the past, I was already familiar with the logic and syntax, making the process enjoyable.