Faq According Card

Community feedback

• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  Your solution looks great but I suggest these.

  • To use position absolute you need a position relative on its parent. It behaves like a sticker and a wall. The sticker is positioned absolute and the wall is positioned relative.

  • you can a transition on your drop down too.

  Besides good job there👍 Happy coding👍💻

  Marked as helpful

  1

  ---

  

  Etno Polino•180

  @EtnoPolinoPosted over 2 years ago

  @Kamasah-Dickson

  • i've done this suggestion but i cant really see what has change in my solution.

  • Initially i tried a transition on the drop but it cant work since i cant put a transition on a display style. i tried something like .hide { display: none; transition : display 0.5s } since hide is the class allowing me the drop down. I dont know how i could put this transition.

  0

  

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  @EtnoPolino Transitions don't work on Display:none you can rather use visibility: hidden

  Marked as helpful

  1

  

  Etno Polino•180

  @EtnoPolinoPosted over 2 years ago

  @Kamasah-Dickson

  after 2h of try harding.. i finally did it with

  .answer { max-height: 0; overflow: hidden; transition: all 0.3s ease-in; }

  and

  ` const panel = this.nextElementSibling;

  if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
  

  }`

  answer is my class holding the faq answer.

  what find very weird is that after i managed to this, i found a video about transition FAQ that had the exact same html structure than mine, yet when i tried to reproduce it didnt work. Annoying.

  1

  

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  @EtnoPolino Am so Glad you successfully made it.👏👏💻👍

  0