Faq accordion using tailwind css and Javascript

Community feedback

• 

  Grego•1,310

  @Grego14Posted 6 months ago

  👋 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

  0
• 

  John Pugh•340

  @JohnPugh688Posted 6 months ago

  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.

  0

  ---

  

  Grego•1,310

  @Grego14Posted 6 months ago

  @JohnPugh688 Hello! When I told you that there wasn't a way to make the transition without using JavaScript I meant that there is no way to make the transition that you want to do and make it looks good when it closes/opens and vice versa, just using CSS as you can see when it closes doesn't do it in the same way as it opened. I made a pen where you can see a way to do it and make it look a little bit nice. Pen.

  I don't think there's a way to make the text disappear and appear in a good way, but if you find one feel free to let me know.

  To use bold text in the font you have to wrap the word in two ** on the left and two on the right something like this ..text.. but using *

  Remember that to reply the comment you must click on the reply button because if not, I will not receive the notification.

  Marked as helpful

  0

  

  Grego•1,310

  @Grego14Posted 6 months ago

  @Grego14 found this article in which they do it in a good way css tricks

  Marked as helpful

  0