FAQ accordion card using Sass and vanilla Javascript

Community feedback

• 

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  Thanks Marissa!

  Yes, the carrot gets rotated with CSS to point up or down based on the .active class. It doesn't really matter where the carrot is as long as the .active class gets applied to a parent element. If you can get your javascript to toggle an .active class on each question when it's clicked then you can have CSS do all the heavy lifting with hiding/showing the answers and rotating the carrot.

  The .fade-1 and .fade-2 classes are for the images when the page loads, but the transitions for the answers are all done based on the .active class (max-height and opacity). e.g.

  .accordion-collapse {
      ...
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition-delay: 0s, .125s; /* slight delay on the opacity transition */
      transition-duration: .5s, .5s;
      transition-property: max-height, opacity;
  }
  .active .accordion-collapse {
      max-height: 70px; /* expanded question height */
      opacity: 1;
  }
  

  Hope that helps 😅

  0
• 

  Marissa Huysentruyt•165

  @marissahuysentruytPosted almost 3 years ago

  Nice work! I'm really new at javascript so I have a couple questions for you.

  I was having a really hard time figuring out where that carrot animation needed to be to get triggered correctly. I see you used ::after for your orange carrots. Did that transform get triggered then because of the eventListener is on your .active class (which got added after the click)?

  Also, I didn't even get to the transitions to display the answers (your fade-1/2/3). If those divs with the class of the fades are all closed, how is that transition getting applied to your accordion items?

  Again, great work! Just trying to understand. Thanks for actually giving me some help (indirectly!) :)

  0