Responsive FAQ accordion card with tailwindcss and alpine.js

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @blndcat,

  Nice job on challenge

  Just a design suggestion, instead of increasing the font size when a faq is active keep the font size the same and just make it bold. You can also animate the height of the answer instead of the h3 that it slide open rather that just appearing, you would need to remove the display: none and use the following.

  .faq_item>.answer {
      transition-duration: .5s;
      max-height: 0;
      overflow: hidden;
  }
  
  .faq_item-active>.answer {
      max-height: 50px;
      overflow: visible;
  }
  

  You can also before adding the .faq-active class to the one being clicked on loop over all of them and remove the .faq-active that way only one will be open at a time.

  Hope this is helpful.

  0