FAQ card made by HTML, SASS and Vanilla JS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi @MaryEhb

  Firstly, you've done a fantastic job on this overall! The layout on this can be really tricky. Let me help you polish your solution and make it fully accessible...

  Instead of this:

  <div class="flex">
      <h2 class="question">How many team members can I invite?</h2>
      <img src="images/icon-arrow-down.svg" class="ans-btn" alt="answer button" title="answer button">
  </div>
  

  Try this:

  // html
  <h2 class="flex question">
      <button class="question-btn">
          How many team members can I invite?
          <img src="images/icon-arrow-down.svg" class="ans-btn" alt="" aria-hidden="true">
      </button>
  </h2>
  
  // css 
  .question-btn {
      all: inherit;  // will inherit all styles from the h2 above
  }
  

  This would make your code accessible by keyboard and assistive technologies 👍

  Obviously, changing the markup would mean you'd need to change the js too....

  There is no need for multiple event listeners. Instead, on click of the button toggle one class on/off on the closest .question-wrap. This can then control everything else - transform the icon, make question bold, expand the answer.

  It's more usual in expandable sections to allow more than one to be open at once, but that is your choice really. If you allow more to be open, you may need to add a scrollbar or something which you might not want

  The reason you think the transform effect doesn't work on your answer is because you cannot transition the display property. Instead, transform opacity, height, visibility etc. But leave display alone 🙂

  I hope all this helps you.

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Also, I notice in your js you're using let when you should be using const. Maybe look up more about this and about the addEventListener method

  0

  

  Mariem Ehab•335

  @MaryEhbPosted over 3 years ago

  @grace-snow thank you for all of your comments 😻 I will start working on them right away 👍

  0