Skip to content
Submitted about 2 years ago

FAQ Accordion Card w/ NO JS

Paula Rodrigues•250
@paulaabro
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

I think the hardest part was to find a way to add the toggle icon and make it rotate, but I little thinking when a long way. I new how to make the toggle of the text because I had used details/summary before on README.md . Is missing the two grayish lines couldn't get them so leaving it.

Community feedback

  • Bingerminn•240
    @yallsobadPosted about 2 years ago

    Hey!

    I would remove the height on the container so when you expand all the questions the container height increases as needed.

    You could also put cursor:pointer under the summary element so it works on the entire element instead of just the text.

    1
  • Doston Nabotov•950
    @dostonnabotovPosted about 2 years ago

    Hi, there! That looks great!

    For the icon, you have implemented the correct approach to rotate the icon. It happens in milliseconds. Just add a little transition to see it rotating.

    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