Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ accordion using CSS Flex, @media, @keyframes, JavaScript functions

Yaroslav Petrov• 80

@PetyaBiszeps

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

During this project I've learnt the most of all 3 I've done on Frontend Mentor. It gave me more understanding of JS overall since I'm new into it. It also gave me some basic understanding of JS/CSS transitions and how to communicate between JS/CSS to make them out. Overall, in my opinion, that's an amazing challenge to start with JS if you already know something about both HTML and CSS. At least that's how it worked for me ;)

What challenges did you encounter, and how did you overcome them?

Well, there is couple of them. Some were hard for newbie like me :D First of all is of course JS function that will control both showing answer and changing icon dynamically and depending on specific lines. I could go easy way but I'm learning so I spend kind of much time on creating short and single function that will control this process. Second thing is keyframes. I have never used them, that was the first time using them and at the start I didn't really understand them, but I overcame this as well ;)

Except that (because JS and Keyframes were really tough for me at this point) everything went just fine. Really good challenge for anyone starting their journey in JS!

What specific areas of your project would you like help with?

I want to see overall expressions of this project. Is it okay in terms of CSS and is it good in terms of JS logic. Would be amazing, if someone could make advice on how to make it better!

Community feedback

T
Grace• 28,810

@grace-snow

Posted

Sorry to tell you this, but you mustn't ever add click listeners to non-interactive elements like divs! Always test with a keyboard at least.

You'll need to change the markup on this to use a button with the required state information via aria. And once that's done, you'll need to change the js and maybe css too.

I strongly recommend against messing with in-line styles in JavaScript. Keep the concerns separate. Let JavaScript handle only the interactivity such as toggling aria values and optionally toggling a class. Let CSS handle all styling (including showing the correct icon).

Here is a post about how to build a disclosure (accordion) pattern like this.

Marked as helpful

0

Yaroslav Petrov• 80

@PetyaBiszeps

Posted

@grace-snow thank you for this valuable feedback! No need to apologize for saying that I did something wrong since I'm completely okay with critique, I would say even more, I'm really thankful for having this kind of review, with explanation and source to learn more! Gonna look at this deeper now and fix this solution now. Again, thank you for review and feedback <3

1

Please log in to post a comment

Log in with GitHub
Discord logo

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