Skip to content
Submitted 8 months ago

FAQ Accordion

Mouwvfic•210
@mouwaficbdr
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

What are you most proud of, and what would you do differently next time?

Learned some useful JS methods:

.nextElementSibling .classList

Community feedback

  • Noel Hoppe•350
    @noelhoppePosted 8 months ago

    Hi, some suggestions:

    1. div.contentshould be <ul>
    2. div.sectionshould be <li>
    3. div.section-headshould be a <button>
    4. h3should be <p>
    5. event should target <button>
    6. Use ària-expanded, aria-controlson<button>`
    7. Use ària-hiddenondiv.section-details`
    8. Toggle attribute ària-expanded` on click and if (aria-expanded == true) button + div.section-details.classList.remove(hidde).
    Marked as helpful
    1
    Mouwvfic•210
    @mouwaficbdrPosted 8 months ago

    Hey thanks for your feedback! @noelhoppe I'll apply your suggestions !

    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