Skip to content
Submitted about 2 years ago

FAQ accordion using Sass

John Lois Floro•300
@loifloro
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • How to properly set the box illustration on the card?
  • Why 'this' is not working?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi, John! 👋

    For the box image on the desktop layout, you can use either pseudo-element or an img tag with empty alternative text (alt=""). Then, you can try absolute positioning the box. I recommend not using percentage units. I recommend using rem instead.

    Here are some suggestions for improvements.

    • I recommend using details and summary tags to create the accordion. Currently, there's no way for the screen reader to know whether the accordion is opened or closed. Also, since it is not an interactive element, it can't be accessed using the keyboard.
    • I suggest not styling the html element. Use body element to set up general styling for the page. html element can overwrite the user's setting so it's best to not style anything in it.

    I recommend visiting the Solid Start website to know an overview of web accessibility.

    I also have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

    I hope this helps! Happy coding!

    Marked as helpful
    0
    John Lois Floro•300
    @loifloroPosted about 2 years ago

    @vanzasetia thank you for your insightful comment. how about the 'this' on Javascript file? Unfortunately, it's not working.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @loifloro You're welcome!

    I don't see any this keyword in the app.js. So, I don't know about the issue. I recommend trying to replicate the issue on the live site. This way, I can know about the issue.

    Maybe the MDN documentation for the this keyword can help you.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @loifloro Also put the script tag above the closing body tag.

    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