Submitted over 3 years ago

Vanilla HTML, CSS, JS FAQ Card Component

Ryan Cahela• 220

@RyanCahela

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

Does anyone know of a good method to keep the entire card from expanding and contracting when the questions are clicked and the answer is displayed without having the text overflow from its container?

Community feedback

Patrick• 14,285

@palgramming

Posted over 3 years ago

well do not set a height on the overall container but you can also just close the open questions and only allow one question to be open and a time that helps to mitigate that problem

Ryan Cahela• 220

@RyanCahela

Posted over 3 years ago

@palgramming I’ll try that thank you.

Praneet Dixit• 120

@PraneetDixit

Posted over 3 years ago

Hi. Nice project!

Some suggestions from my side :-

The hero image is placed using pseudo element. Instead, you can place the image in the hero-image-container itself.
FAQs give you awesome chance to use details and summary elements. Check this article by CSS Tricks
To prevent expanding and contracting of the card, you can have a question selected by default on the page load and collapse all other questions when the user selects another question. Check this pen

Happy Coding!

Ryan Cahela• 220

@RyanCahela

Posted over 3 years ago

@PraneetDixit thanks for the feedback.

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