Improve badge dropdown behavior with auto-close and smooth animations

[Katotodan]

Notes for Reviewers

This PR improves the user experience of the dropdowns on badges.layer5.io, specifically in the General and Certificate sections.

What’s changed

Ensured that only one dropdown can be open at a time, opening a new dropdown automatically closes any previously opened one on the section.
Added smooth open and close animations to make the interaction feel more natural and polished.

Why this matters

Prevents UI clutter caused by multiple open dropdowns.
Improves clarity and focus for users navigating badge information.
Enhances overall UX with subtle, modern animations.

This PR fixes #71

Signed commits

• Yes, I signed my commits.

[github-actions]

PR Preview Action v1.6.3
🚀 View preview at https://layer5io.github.io/recognition/preview-badges/pr-72/
Built to branch gh-pages at 2026-01-26 14:53 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[Katotodan]

Hello @Rajesh-Nagarajan-11 can you review this PR?

[Rajesh-Nagarajan-11]

Any video will be helpful + can you check what's the issue in PR preview

[Katotodan]

Vidoe before change

before.mov

After the change, I added the animation, and if only one question is opened, the others may be closed automatically.

After.change.mov

[Katotodan]

@Rajesh-Nagarajan-11 please find the attached video above.

[Rajesh-Nagarajan-11]

I can see the lag when open , it's actual behaviour or issue from your side?

[Katotodan]

@Rajesh-Nagarajan-11 that lag was only visible when recording my screen, but when I stopped recording, there is no lag.
Another point is when I run make site locally it kind of changing the package.json file.
But I did not put that file change in this PR.
Here is the screenshot of the change inside package.json

[Bhumikagarggg]

@Katotodan Thank you for your contribution! Let's discuss this during the website call tomorrow at 6:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂