FAQ Accordion Card Without JavaScript

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, great job on this one. Desktop layout is great, however the responsiveness and mobile state should be addressed since right now, resizing the layout until mobile breakpoint, the image is just gone since it is small, and the mobile state, the contents are being hidden.

  Elaine already gave great tip on this, just going to add some suggestions as well:

  • Avoid using height: 100% or 100vh on a large container like the html and body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
  • You don't need to use header on this one since this just looks like a main component of a page. You can just use div on the FAQ.
  • Using checkbox on this is not really suited since there are more accessible and suited elements to be use, also do not use display: none on an input element, don't, you are removing this completely on the dom, visually using mouse you can click the label right but it is limited to that, you can' use keyboard or screen-readers.
  • Instead, a good approach to avoid extra manipulations, you could use details element for each accordion. This is much suited and accessible from the start.
  • Also right now, clicking all the accordion overlaps the container, you might want to check that one out.
  • Lastly, just the responsiveness and the mobile view needs to be adjusted.

  Aside from those, great work again on this one.

  15

  Marked as helpful
• 

  Elaine•11,360

  @elaineleung

  Posted over 3 years ago

  Hi Alisha, I just completed this challenge as well; you can have a look at my repo and see if that helps: https://github.com/elaineleung/frontendmentor/tree/main/accordioncard

  I see in your live site that the text overflows outside of the card when all of them are clicked. I checked out your code but I couldn't figure out how the questions and answers are being expanded as I can't find your JS file, and the HTML doesn't show the link either. Anyway, you can check out my live site and see whether that's something you're looking for, and hopefully my code can help you out. Good luck!

  13