@hyrongennike
Posted
Hi @blndcat,
Nice job on challenge
Just a design suggestion, instead of increasing the font size when a faq is active keep the font size the same and just make it bold. You can also animate the height of the answer instead of the h3 that it slide open rather that just appearing, you would need to remove the display: none
and use the following.
.faq_item>.answer {
transition-duration: .5s;
max-height: 0;
overflow: hidden;
}
.faq_item-active>.answer {
max-height: 50px;
overflow: visible;
}
You can also before adding the .faq-active class to the one being clicked on loop over all of them and remove the .faq-active that way only one will be open at a time.
Hope this is helpful.