Skip to content
Submitted 10 months ago

FAQ Accordion

YANIIツ•510
@filipjanik00
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello there! I've been learning JavaScript for a week now and came out with a solution of this challenge :) Let me know what you think about it! Have a good evening everyone! :)

Community feedback

  • Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    hi Filip Janik great work you did. I have some accessibility and semantics recommendations for you.

    1- try to change <div class="faq"> to a <main class="faq"> , <div class="faq__title"> to a <header class="faq__title"> and <div class="questions"> to <section class="questions">

    this does not affect your project visually but it improves SEO optimization as well as the accessibility of your project.

    2- try to avoid <hr> Consider using CSS to style borders or margins to separate questions .

    3- Since you have repeated image tags, you can group them together for better readability. <img class="plus-icon" src="./assets/images/icon-plus.svg" alt="Question Plus Icon" /> <img class="minus-icon" src="./assets/images/icon-minus.svg" alt="Question Minus Icon" />

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord