Skip to content
Submitted over 3 years ago

Vanilla HTML, CSS, JS FAQ Card Component

Ryan Cahela•220
@RyanCahela
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

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,265
    @palgrammingPosted 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

    1
    Ryan Cahela•220
    @RyanCahelaPosted over 3 years ago

    @palgramming I’ll try that thank you.

    0
  • Praneet Dixit•120
    @PraneetDixitPosted 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!

    0
    Ryan Cahela•220
    @RyanCahelaPosted over 3 years ago

    @PraneetDixit thanks for the feedback.

    0

Please log in to post a comment

Log in with GitHub

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