FAQ accordion with Accessible Radio Buttons 👀

Solution retrospective
I liked the fact that I didn't have to use any JavaScript for this challenge.
What challenges did you encounter, and how did you overcome them?A big challenge that I cam across was trying to implement logic to conditionally display an accordion item's description based on if it was selected.
I came up with this:
What specific areas of your project would you like help with?.item__label:has(.radio:checked) + .item__description { margin-top: 1.5rem; max-height: 6.25rem; /* Adjust as needed */ transition: 350ms; }
Specifically, I'd like help with transitions between open an closed states of the accordion items:
.item__description { max-height: 0; overflow: hidden; transition: 350ms; font: normal 0.875rem/1.5 "Work Sans"; color: var(--pale-purple); } .item__label:has(.radio:checked) + .item__description { margin-top: 1.5rem; max-height: 6.25rem; /* Adjust as needed */ transition: 350ms; }
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ilham-bouk
The page looks good and the code is organized and clear, nice job!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord