FAQ Accordion Card with only HTML & CSS

Community feedback

• 

  Stephane Baroux•165

  @steppan26Posted over 3 years ago

  Hi @FlexAgrume,

  Great work on the project , it looks really good and functions well. I recently did this challenge too and really enjoyed it. One small piece of feedback on your drop-down menus (love how you've animated the rotation of the arrows btw), when in desktop view I can open them all up at the same time which causes the lower text to disappear. I would consider either allowing the 'card' to expand with the text, or alternatively to use my solution which was to use JS to force all drop-menus to close before applying the 'open' function (hope that makes sense).

  1

  ---

  

  FlexAgrume•30

  @FlexAgrumePosted over 3 years ago

  Hi @steppan26,

  Thanks for your feedback. It makes sense, no worries.

  In fact, I took the challenge literally by not using JavaScript. It's true that by hiding the scrollbar, we don't realize that we can scroll the text.

  On Firefox, we can make the scrollbar aesthetic, but the CSS property scrollbar-with is not yet supported by other browsers. I'll see what I can do with the ::webkit-scrollbar selector.

  0

  

  Stephane Baroux•165

  @steppan26Posted over 3 years ago

  @FlexAgrume Admitedly I did notice after posting my comment that you had used purely CSS. I have noticed that the 'card' adapts its size to the content when in mobile view, could you maybe do the same thing in desktop mode? Or may expand all sub-menus to get your maximum height needed and then use that to resize your 'card' ?

  0

  

  FlexAgrume•30

  @FlexAgrumePosted over 3 years ago

  @steppan26 : "Or may expand all sub-menus to get your maximum height needed and then use that to resize your 'card' ?"

  At first, that's what I had done, but I didn't find the result pleasing to the eye. The size of the card changed every time it was opened, which was not pleasant for the user.

  I just made some modifications and I'm pretty happy with the result. Let me know what you think.

  0
• 

  rntpsc•105

  @RntPscPosted over 3 years ago

  It is a nice project but unfortunately tag : 'details', 'summary', '[open]>summary', etc.

  They are not supported by Internet Explorer with this browser the part with '.FAQ__Wrapper' does not work.

  0

  ---

  

  FlexAgrume•30

  @FlexAgrumePosted over 3 years ago

  @RntPsc In my opinion, IE is outside the scope of this challenge.

  0

  

  rntpsc•105

  @RntPscPosted over 3 years ago

  @FlexAgrume Ok, but unfortunately it is a browser still widespread. You consider it for next time. Enjoy.

  0