FAQ accordion with Accessible Radio Buttons 👀

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

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:

.item__label:has(.radio:checked) + .item__description {
    margin-top: 1.5rem;
    max-height: 6.25rem; /* Adjust as needed */
    transition: 350ms;
}

What specific areas of your project would you like help with?

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;
}