FAQ Accordion with TailwindCSS

Community feedback

• 

  Juan Alvarez•60

  @alvarezj-devPosted over 3 years ago

  Hey! I love Tailwind, so I was to take a look. Something I see is maybe you should add the property of cursor: pointer to the cards so it looks cleaner.

  Also, consider that every card opens in the same place. Right now, the card are "displacing" the content depending of the side of the inner box, but it should be shoved to the bottom, because you lose focus of the clickable part of every card.

  Bonus points if you make the animation of the dropdown cleaner! I think is a nice fidget, I'd love to see the desktop version with the big image and a little background color. Prob I make this when I finished my current project. Good job!!

  1

  ---

  

  jul_julham•210

  @zulhamsyPosted over 3 years ago

  @alvarezj-dev hi! Regarding how the dropdown menu opens, would you recommend using radio buttons instead of the "details-summary"? because I wanna try to finish this project without using JS, btw thanks for the suggestion. I really appreciate it :D

  0

  

  Juan Alvarez•60

  @alvarezj-devPosted over 3 years ago

  @zulhamsy I think details-summary is fine, I just made a test and it seems to work fine. Still, I have to try build it myself to check if it has the same behavior. If I made it, I'll let you know!

  0

  

  jul_julham•210

  @zulhamsyPosted over 3 years ago

  @alvarezj-dev I've added an animation when the question card is opened, but do you have any ideas to add animation when the card is closed without using js? also I've fixed the 'displacing' issue hehe

  0