Submitted over 4 years ago

FAQ accordion card | Built with Malina.JS

@zuolizhu

A solution to the FAQ accordion card challenge

Solution retrospective

I know most of you have heard of vanilla.js, but have you ever heard malina.js 🤣? It just came out few months ago and I just saw it tonight and here is the result 🤪.

Feedbacks are welcome!

Code

Please log in to post a comment

Community feedback

Anna Leigh•5,135
@brasspetals
Posted over 4 years ago
It is possible! You can use radio buttons - tutorial here.
Matt Studdert•13,611
@mattstuddert
Posted over 4 years ago
Nice work, Connor! Never heard of Malina.js. Another tool to add to the ever-growing list of things to look into! 😅

Your solution looks great and is basically pixel-perfect, like usual which is awesome. My only suggestion for improvement would be to not put click listeners on non-interactive elements, like div elements. If someone was trying/needing to navigate the questions using anything other than a mouse/cursor, they wouldn't be able to. So as it is, this FAQ accordion is inaccessible to those people.

As @brasspetals mentioned, you could use radio inputs. Or you could use the details element, which is designed for this kind of pattern.

Keep up the great work!
ApplePieGiraffe•30,525
@ApplePieGiraffe
Posted over 4 years ago
Hey, Connor Z!

Sweet job! 👏

It's like pixel-perfect again!

Just one tiny thing—on my 13" screen, the last FAQ in the component slightly overflows its container if another FAQ with a lot of text content (meaning it takes up more height) is opened. Perhaps you could use min-height on the component or something to prevent it from becoming too short on smaller screens.

Happy coding! 😁

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