FAQ Accordion Card with Flexbox and Grid

Community feedback

• 

  Vicktor•920

  @Victor-Nyagudi

  Posted over 2 years ago

  Hi, Fernando.

  Nice attempt on this one. I'm glad you used the BEM naming convention.

  I noticed you queried the DOM for all the questions and then added a click event listener on each one in your JavaScript.

  This works for a small solution like this one but is not the best for performance. In order to save on performance, you could attach an event listener to .card and get where the user clicks on using e.target.

  If the area the user clicked on is a question, you can then reveal the answer.

  Here's an example of what the code could look like:

  const card = document.querySelector('.card');
  
  // This is an alternative way of responding to click events. 
  
  // You can still use 
  // card.addEventListener('click', (e => { code in the function goes here e.g. console.log(e.target); }))
  
  card.onclick = function(e) {
     console.log(e.target); // <- Log to the console what was clicked on
  
     if (e.target.classList.contains('card__question')) {
  
        // e.target.chidren[1] gets the answer. Try logging it to the console to see what it returns
  
        e.target.children[1].classList.toggle('inactive');
     }
  }
  

  This isn't the whole solution, but you can build on it to improve your JavaScript.

  Hope this helps.

  All the best with future solutions.

  00

  Marked as helpful