FAQ accordion HTML & CSS only

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @Kitalphar,

  Great job on implementing the FAQ accordion! The click functionality to expand and collapse using only CSS is an impressive approach—kudos! 👏

  Here are a few suggestions to refine your code further:

  1. Proper Use of <article> Tag

  • The <article> tag is best suited for self-contained, reusable content that can stand alone. Wrapping multiple FAQ sections in individual <article> tags may not be the best use here, as they are part of a single cohesive FAQ block.
  • Instead, consider using <section> or <div> for the container and individual items to align better with semantic HTML.

  2. <label> and <input> Pairing

  • While your current implementation works, wrapping the <input> inside the <label> improves accessibility and creates a larger clickable area for toggling FAQs.
  • Example:

    <label class="faq-lbl">
      <input type="checkbox" id="faq_btn_3" class="toggle-button">
      Can I use Frontend Mentor projects in my portfolio?
    </label>
    

  3. Improve Image Accessibility

  • Add descriptive alt attributes for images to enhance accessibility. For example:

    <img src="./assets/images/background-pattern-desktop.svg" alt="Background pattern">
    

  4. General Code Organization

  • Consistent indentation and spacing improve readability.
  • Grouping related elements (like input and labels) visually in your code helps others understand the structure quickly.

  Final Thoughts 💡

  Your design and functionality are fantastic—well done! With a few minor adjustments to improve semantics and accessibility, your code will not only look great but also adhere to best practices. Keep up the excellent work! 🚀

  Marked as helpful

  1

  ---

  

  Kitalphar•280

  @KitalpharPosted 2 months ago

  @skyv26 Hey~

  Thank you for the feedback!

  I tried changing things based on your feedback. It seems i misunderstood what "self-contained" means for <article>, thanks for the clarification.

  As for the advice on nesting <input> element inside a <label>, i ususally do that, however for this particular project, using the + (next-sibling combinator) to open&close the accordion made me unable to nest the <input> element.

  Currently i have no better idea to do this with CSS only that i can also match with the design, so i'm afraid it will have to stay like this. Maybe down the line i'll find a way to do this better.

  1