Skip to content
Submitted almost 2 years ago

FAQ Accordion Card (SASS + JS + Easter Egg)

Lucas 👾•104,340
@correlucas
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

👾 Hello, Frontend Mentor community. This is my solution for the FAQ Accordion Card community

My first challenge using SASS and second one using JavaScript. Ehhh I still don't feel confident with JS, I tried to apply the effect to the Accordion where everything closes when one tab is open, but I did fail (need to study it more). I'll keep trying! =)

My friend @AdrianoEscarabote explained and show me the code to apply the code to collapse the accordion tabs, but even if I saw the code I did not understood 😂 Thank you anyway bro!

I've used the solution @ApplePieGiraffe for this challenge as a reference to apply the animation on the illustration cube. His solution for this challenge is amazing as all the other challenges he did. A great profile to follow. 🦒

If you can add something or give me some tip. I'll be happy to hear any feedback and advice!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 2 years ago

    HAHAHAHAHA! 😂

    I love the easter egg you added! 😆 It adds a very whimsical touch to your solution! The rest of your solution looks great, as well! 👏

    I think the best way to go with creating the accordion elements in this challenge would be with the details and summary elements (or perhaps a combination of buttons and other elements). They are already fairly accessible and provided a clean, semantic way to create accordion elements. I see you have used the dl, dt, and dd elements for the accordions, but those are not interactive or accessible by keyboard, so not all users will be able to open the accordions to see the content inside.

    MDN's reference is a great place to start learning about the details and summary elements if you are interested. 😉

    In addition to that, it would be good to add cursor: pointer to the accordion elements to let users know that those elements are clickable.

    And you don't have to worry about closing open accordion elements when another one is clicked. While this behavior is common, it is sometimes discouraged because users may want to have multiple accordion elements open at the same time and closing an accordion automatically may be unexpected/unwanted. 🙂

    Hope you find this helpful. 😊

    Of course, keep coding (and happy coding, too)! 😁

    Marked as helpful
    1
    Lucas 👾•104,340
    @correlucasPosted almost 2 years ago

    @ApplePieGiraffe Thank you for the feedback! I appreciate that.

    Indeed I had problems with the dl, dt because when I placed another tag to add the lines between every block this gaves me a accessibility problem because I've used an element different than the dl/dt/dd inside of it. Next time I'll try to use a summary like you said, I didn't knew that you could access it using keyboards (nice info).

    About the accordion closing, was only a way practice my JS skills, but it didn't worked. I was able to make it close when one block is open, but was unable to make the block close clicking in the same block to close everything.

    Thank you!

    1
  • Adriano•38,120
    @AdrianoEscarabotePosted almost 2 years ago

    Congratulations on the result Lucas, everything is good!

    You always amaze me with these easter eggs! 😄😄

    1
    Lucas 👾•104,340
    @correlucasPosted almost 2 years ago

    @AdrianoEscarabote Thank you bro!

    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