FAQ accordion card

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Jose, well done! I completed this one a while back, but I remember also that it took me a long time because of the positioning. Anyway, just wanted to answer your question about closing the items when you click on another question. What you can do is to add another iterator within your forEach() function, and that iterator would help to remove all the styling classes first before you use the classList.toggle() (which in this case can also be the classList.add()). It will look something like this within your forEach() function:

  questionsItems.forEach(function (question) {
    question.addEventListener('click', () => {
      const questionTitle = question.querySelector('.question');
      const questionText = question.querySelector('.questions__text');
      const questionIcon = question.querySelector('ion-icon');
  
     // use forEach to remove styling classes
  
      questionsItems.forEach((item) => {
        item.querySelector('.question').classList.remove('question-open');
        item.querySelector('.questions__text').classList.remove('open');
      });
  
      questionTitle.classList.toggle('question-open');
      questionText.classList.toggle('open');
      questionIcon.style.transform = 'rotate(180deg)';
    });
  });
  

  About the overflow: scroll, in my component I actually opted to let my div grow longer depending on the number of questions opened; I didn't want the questions to close on their own when a new question is opened, but I also didn't want a scroll (I didn't set a height for my div, and so no need for a scroll bar). You can have a look at my repo here and compare it with yours to see what I've done differently.

  Hope some of this helps!

  Marked as helpful

  1

  ---

  

  Jose Gonzalez•310

  @placetenoPosted over 2 years ago

  @elaineleung Hi Elaine, thank you so much for taking the time to help me with this challenge and the detailed feedback! 🙏🏼 Agreed, the position of the elements is a bit of a hassle, but it's definitely a great opportunity to come up with creative solutions and stretch your knowledge of CSS. Yours looks clean and I liked your approach of having the images stayed at the top instead of growing with the card. I will implement your ideas and maybe follow your design. Thanks again!

  0