Skip to content
Submitted over 4 years ago

FAQ Accordion Card - HTML/CSS - Flexbox - JS

Josh Prentice•235
@jfprentice
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I feel like I am getting more comfortable with JS but at the same time not at all haha I am happy with the results I was able to get but I'm not sure if my script is efficient or not. I did notice that to get each answer to drop down for the first time, you have to double click, but a single click will open/close after the initial drop down. Would love some pointers there!

I also feel like some of the positioning choices I made are a little questionable. I would have really liked if I could have gotten the answers to drop down without shifting the entire list both up and down. Having the top question in a fixed position and all the answers shifting downward would have been choice. To mitigate on overflow, I used js to ensure only one answer could dropdown at a time, selecting a different question would close the currently opened answer. I was also trying to find a way to slow the display transition for the answer divs but was unable to figure out a way.

Any tips/tricks/pointers/critiques are welcome and greatly appreciated!

Thanks for looking!

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Josh Prentice! 👋

    Great work on this challenge! 👍

    In addition to all of the wonderful feedback you've already received, I just wanted to let you know you can use the HTML <details> and <summary> elements to easily make an accordion without any JS! I was pretty happy when I found out about it and you might be able to use it in a future challenge, too, if you'd like!

    Here's some more info, if you're interested.

    Happy coding! 😁

  • Dwight•215
    @SarsiPC

    Good work, boss! I was doing this solution myself as well and had a really hard time with javascript. After trying out other user's code, I have found that your javascript code was the cleanest and it was easy for me to understand. So, I decided to use it on my solution. You should check it out!

    Thanks!!!

  • Emmilie Estabillo•5,600
    @emestabillo

    Hey Josh, great work as always! Grace has already given a lot of awesome pointers. Here's a SO post about your JS question. It seems it is looking for the inline style that was initially set on the document with the first click. None was written so it takes an extra click for the styles on your JS file to be applied.

  • Grace•32,130
    @grace-snow

    Some really nice work here. I've finished for the day so only had a quick peek on my phone. Mobile design looks great and I can understand all your code well.

    A few small things to think more about:

    • with accordions / collapsible sections users are meant to be able to open more than one at a time. Otherwise they'd be tabs (just vertical ones) . And with display none being used I'd have to check if these were still accessible with assistive technology.
    • personally I don't like click events being placed on non semantic html elements. I would always use a button for this kind of UI (or radio inputs for tab behaviour) so you get all the native interactive behaviour by default.
    • there should probably be aria attributes used to make it clear what's expanded and what's not
    • and I'd have each faq in a list item I think

    Hopefully that's helpful ideas for where to go with it.

    I haven't looked at position/double-click/layout stuff you've asked about but could maybe take a look tomorrow when I'm on my laptop again.

    Good job though, it definitely all works and looks nice on my phone

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