A mobile first FAQ accordion card with vanilla JavaScript

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 3 years ago

  Hi Jason

  I really like this solution! Nice semantic html and clearly structured JavaScript, well done

  The only issues I see are

  • height 100vh instead of min-height is breaking this solution on mobile. Content is cut off and there is no ability to scroll. Easy to fix though
  • it’s very strange how the icon animates after the question. This creates a little glitch and makes it look broken
  • animating max height instead of height on the question makes this solution less robust if it was a real world scenario. You wouldn’t want to limit the height in case longer content was added to an answer
  • similar potential issues where you’ve defined width and height on the desktop grids. In those cases max width and min height might be more robust

  Good luck

  Marked as helpful

  1

  ---

  

  Jason Heys•175

  @heyitsganyPosted about 3 years ago

  @grace-snow Hi Grace,

  • Really appreciate the feedback. The height of 100vh isn't the problem, for some reason I've put an overflow of hidden on the body. No idea what that's a holdover from, but if I remove it it works.
  • As for the icon. I'm not entirely sure how you mean it looks broken. Do you perhaps mean how it animates at a slightly slower transition speed? That's easily fixed.
  • Animating the max height seemed to be the ideal way to transition the elements within the design. You could ideally workout the maximum the text would ever be and give it that value. Transitioning height would require calculating each elements height as you can't transition height set at auto.
  • This seems an easy fix, and is something I need to get into the habit of doing if I don't need an explicit width.

  Thank you!

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 3 years ago

  @heyitsgany yes in a real world scenario you would have to transition height to 100% or use js to calc the items height and apply it inline. Or I guess you'd have an auto scroll inside the answers in case it was ever needed

  I work on content managed sites a lot and you'll be amazed how much content gets written into these kinds of answers once a site goes live! 😂

  Marked as helpful

  1