FAQ card with Grid and Flexbox

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  Hi

  So the issue with small screens for me (viewing on mobile) is all because you're using anchor tags to trigger the open/close. If you used a button (with type button) it wouldn't need to page refresh. That would make the solution accessible too. Of course you would then have to move the event listener onto that button and have spans inside to wrap the text and image.

  It looks like your js is a lot more complicated than it needs to be tbh. I don't fully understand why it's targeting the images and questions separately, and with accordion ui it's standard to allow users to have multiple open at once, so no need to close the others. I think if you revisited this with accessibile html not using anchor tags, all you'd need to do on click is toggle one class on the Q&A parent.

  I hope. That makes sense and is helpful (it's late here and I'm tired so not sure if I'm. Explaining well tonight! 😂)

  2

  ---

  

  Agata Sokołowska•50

  @agatablazejewskaPosted almost 4 years ago

  Hey, thank you so much for the feedback. It all makes sense perfectly. I agree with having multiple items open at the same time. I'll change that. As to my JS - I've had a completely different approach at the beginning and then I've found out about the grid's 'min-content' size and just forgot to remove some of the elements.

  But I'm especially thankful for the trick with btns - it is often said in some courses that it is generally a better approach to simulate buttons with links. But they never mention this small issue!

  Thank you again, I'll get to refactoring first thing in the morning :)

  0

  

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  The rule to help you remember which one is:

  • button elements for actions
  • anchor tags for navigation

  ☺

  0
• Account deleted

  Looks good, great job.

  1