Skip to content
Submitted 4 months ago

FAQ Accordion Solution using Vanilla HTML, CSS & JS

Kamal Redzwan•210
@kmlrdzwn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Learned to apply the height of the answer container from 0 to the content height using JS scrollHeight property and change back to null when click. Also learn to select the next element sibling using JS.

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

Quick Google search helps me to find the solution on hiding the answer container and show them back using JS.

Community feedback

  • David Miguel Andrés•330
    @damigandPosted 4 months ago

    I think using JavaScript is completely unnecesary for the questions. HTML elements already exist for this specific "FAQ" structure: details and summary. Each of them can be styled with CSS, and you save yourself time and space by not loading the page with unnecesary JavaScript code. You can learn more about this stuff here.

    The rest is pretty nice!

    Marked as helpful
    1
    Kamal Redzwan•210
    @kmlrdzwnPosted 4 months ago

    @damigand Superb! Will amend with details and summary later.

    Huge thanks for this. You're awesome!

    [Edit] @damigand I have just change the solution to using details & summary Pure HTML & CSS! Will look on how to animate the closing effect later on.

    1

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