FAQ Accordian Card Component using SASS

Community feedback

• 

  Agustin•340

  @agusc01Posted over 2 years ago

  Hi Asha.

  In your script.js change this

  const arrows = document.querySelectorAll('.arrow'); 
  
  arrows.forEach( arrow => {
  arrow.addEventListener('click', () =>{
      let parent = arrow.parentElement; 
      parent.parentElement.classList.toggle('active'); 
  })
  })
  

  for this

  const firstLines = document.querySelectorAll('.first-line');
  firstLines.forEach((arrow) => {
    arrow.addEventListener('click', () => {
      let parent = arrow.parentElement;
      parent.classList.toggle('active');
    });
  });
  

  Then remove function removeClasses (you didn't use it)

  In your css file add this

  .first-line:hover {
    cursor: pointer;
  }
  

  For you <div class="cointainer">....</div> try to add a relative width like width:28rem for example

  Try to use a border-bottom in your <div class="question-box"> instead creating a <div class="divider"></div> . Think abou this... to create a question box you need a <div> you never will forget this element because everything is inside. But you maybe create a div.question-box and forgot div.divider, then looks bad ... If you have the line divider inside the div.question-box with a border-bottom you never forget it . I know, you may think that looking at the page on a server you will notice the difference that a divider is missing, but when you spend hours and hours programming, you will not see it even if you have it in front of your eyes

  Sorry for my poor english it isn't my first language.

  Keep coding. ! Practices makes perfect !

  Marked as helpful

  1

  ---

  

  Agustin•340

  @agusc01Posted over 2 years ago

  I just paid attention to your comment, the correct way to use the removeClasses function is

  const firstLines = document.querySelectorAll('.first-line');
  const questionBoxes = document.querySelectorAll('.question-box');
  
  firstLines.forEach((firstLine) => {
    firstLine.addEventListener('click', () => {
      let questionBox = firstLine.parentElement;
      let wasItActive = questionBox.classList.contains('active');
      removeClasses();
      if (!wasItActive) {
        questionBox.classList.add('active');
      }
    });
  });
  
  function removeClasses() {
    questionBoxes.forEach((questionBox) => {
      questionBox.classList.remove('active');
    });
  }
  
  

  Marked as helpful

  1

  

  Asha•1,210

  @livinglifemeaningPosted over 2 years ago

  @agusc01 Ahh! Again, thank you so much for these comments. I will go back and try to implement your suggestions. I didn't think about a bottom border instead of seperate elements, but very smart. And your English was great :)

  0