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 with SASS and JS

Take 400

@ttakeyaya

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


Any suggestions would be greatly appreciated.

Community feedback

Account Deleted

Hi,

Nice one on completing the challenge, but I encountered some problems;

  • The tabs only work once, don't know what's happening but once you close them after they were opened and then try to open them again they no longer work.
  • There must something wrong with your Javascript, that it only allows the function to be executed once and don't work after that.

Keep coding👍.

Marked as helpful

0

Take 400

@ttakeyaya

Posted

@ttakeyaya

Thank you for all your help. I fixed the unexpected behaviour you just mentioned.

The thing causing error is that I set the wrong value to "panel.style.maxHeight" in JavaScript. I initially set 0, but should be "null";

What I was trying to implement an accordion is something like this: First, set the panel's max-height to be 0px in CSS. If the user clicks the button, then set the panel height to be the enough height from 0px to the minimum height to make the panel visible, using "element.scrollHeight". Then, if the user clicks the button again and the panel height is not 0px, set the panel height to be 0px.

Here's the MDN documentation I referenced: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

Thank you so much!

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