Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ accordion card with Javascript

@snehamoybag

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my second time uploading this challenge. I've managed to add some transition effect to the accordion using the element.style.maxHeight = element.scrollHeight + "px" , but this effect only works when the accordion opens..but doesn't work when its closing. I'll be super grateful if anybody can teach me how to do it. 🙇🏾‍♂️

Update : made the javascript cleaner and added a little bit of transition effect using the opacity property

Community feedback

lieneil 560

@NJVS

Posted

Hi, CSS display property cannot be animated. You can just set max-height: 0 on your .faq-acc-answer and do the element.scrollHeight, then element.removeAttribute("style") to remove the element.style.maxHeight. I just submit my solution, you can check it if you want <3

Marked as helpful

0

@snehamoybag

Posted

@NJVS thankyou so much 🙇🏾‍♂️ let me check

0

Please log in to post a comment

Log in with GitHub
Discord logo

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