Skip to content
Submitted 12 months ago

Faq accordion using tailwind css and Javascript

tailwind-css
John Pugh•340
@JohnPugh688
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Finding the tag which allowed me to add the dropdown for tag without the need for any javascript.

What challenges did you encounter, and how did you overcome them?

i couldn't figure out ow to transition the drop down accordion to make it look a little bit smoother using tailwind. I'm sure there is a way but i just couldn't seem to find a solution so if anyone knows how to get that to work please drop me a message please

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

If someone knows how to add a transition to the drop down accordion using tailwind css please drop me a message. thanks in advance

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grego•1,430
    @Grego14

    👋 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! 😁

    Marked as helpful
  • John Pugh•340
    @JohnPugh688

    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.

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