Faq accordion using tailwind css and Javascript

👋 Hello! 🎉 Congratulations on completing the challenge! 🎉

There is no way to transition from closed to open state without using javascript, as the documentation says "there's no built-in way to animate the transition between open and closed."

Leave the alt attribute empty if you are not going to specify a descriptive text or if the image is just for decoration, when you use it make sure to specify a descriptive text since it is used by screen readers, it should be something like "close the accordion" and not "plus icon". Remember that you can also use the aria-hidden attribute to hide icons and remove them from the accessibility tree.

I hope this helps! 😁

Hi Grego,

Thanks for taking the time give me some feedback.

Using the <details> tag creates the transition from closed to open. i was trying to find a way to get it to ease in and out. which i've managed to finally work it out without the need for Javascript. Tailwind is amazing! my solution as follows:

<details class="py-4 max-h-20 open:max-h-72 overflow-hidden open:transition-all open:ease-in-out open:duration-500 md:py-6">

I will defiantly take your advice when it comes to the alt attribute. I never really thought about being descriptive but it makes sense now you mention it.

On another note how did you get the text to be bold in your comment?

Every days a School day!

Thanks again.