Mobile first accordion (Flexbox, SASS, JavaScript) - v2

Community feedback

• 

  Agustin•340

  @agusc01Posted over 2 years ago

  Hi Iva,

  Here's a tip for your third question

  • how to force to close the accordion item/line if another one is opened (so only one accordion item is opened)?

  The answer like your coding (with "for" and "this." selector)

  const accordion = document.getElementsByClassName('accordionItem');
  
  const closeAllItems = () => {
    for (i = 0; i < accordion.length; i++) {
      accordion[i].classList.remove('active');
    }
  };
  
  for (i = 0; i < accordion.length; i++) {
    accordion[i].addEventListener('click', function () {
      let wasItOpen = this.classList.contains('active');
      closeAllItems();
      if (wasItOpen === false) {
        this.classList.add('active');
      }
    });
  }
  

  And another way to writing code (which in my opinion is better, using foreach, so I didn't use "this." selector)

  
  const accordions = document.querySelectorAll('.accordionItem');
  
  const closeAllItems = () => {
    accordions.forEach((accordion) => {
      accordion.classList.remove('active');
    });
  };
  
  accordions.forEach((accordion) => {
    accordion.addEventListener('click', function () {
      let wasItOpen = accordion.classList.contains('active');
      closeAllItems();
      if (wasItOpen === false) {
        accordion.classList.add('active');
      }
    });
  });
  

  Keep coding and have fun !

  Marked as helpful

  1

  ---

  

  Iva•120

  @IvuskaPosted over 2 years ago

  Hi @agusc01, thank you a lot :-)

  1