Submitted over 2 years ago

Responsive FAQ accordion using HTML CSS/SCSS Js

Robert• 300

@romanrobert

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello,

This challenge was a lot of fun.

Would have loved to handle the JS in a different way. Tried using for loop to iterate over each question but every time an event is triggered on a specific question, the class is applied only to the 1st one.

Tips would be gladly appreciated. :)

Community feedback

Doston Nabotov• 950

@dostonnabotov

Posted over 2 years ago

Hi, there! That looks great! I think, there is a little problem over there. When you open several FAQs, it is overflowing off the card. I guess setting a fixed height is making it happen so. It would be good not to set height, I guess. And, instead, try 'fit-content'. Perhaps, it might work. Everything looks cool! Good luck!

Marked as helpful

Robert• 300

@romanrobert

Posted over 2 years ago

@dostonnabotov

Hello,

Thank you for the tips, Will make sure to implement those changes.

Happy Coding!

Kamasah-Dickson• 5,590

@Kamasah-Dickson

Posted over 2 years ago

Your solution looks great and the JavaScript is working it I think hover states are supposed to be black instead of orange. Like your box shadow there.

Besides good job👍 Happy Coding👍

Robert• 300

@romanrobert

Posted over 2 years ago

@Kamasah-Dickson Hello, I appreciate the feedback. On the given design hover: is orange and only on active state is changing to black.

Happy Coding :)

Kamasah-Dickson• 5,590

@Kamasah-Dickson

Posted over 2 years ago

@romanrobert oh really my bad😂👍 Happy Coding too bro👍😂

Please log in to post a comment

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