jared-shepherd
1/14/2020 - 5:21 AM

Simple Accordion (No CSS Transitions)

Accordion triggers and content must be adjacent elements, utilizing .accordion-trigger and .accordion-target respectively.

//Get the trigger elements
var triggers = document.getElementsByClassName('accordion-trigger');

//Loop through them and add click listener
for (let i = 0; i < triggers.length; i++) {
  const trigger = triggers[i];

  trigger.addEventListener('click', function(event) {
    let clickedElement = event.target,
        clickedElementAlreadyOpen = clickedElement.classList.contains('open');
    
    //If the element that was clicked is open
    if (clickedElementAlreadyOpen) {
      //Close it
      clickedElement.classList.remove('open');

    } else {
      //Close any others that may be open
      for (let j = 0; j < triggers.length; j++) {
          const trigger = triggers[j];
          trigger.classList.remove('open');
      }
      //Then, open the one that was clicked
      clickedElement.classList.add('open');
    }
  }) //trigger.addEventListener()
}
.accordion-trigger {
  &.question {
    font-size: 1.4em;
    font-weight: 800;
    cursor: pointer;
    margin: 0;
    position: relative;

    &:before {
      content: '+';
      margin-right: 5px;
    }

    &.open {
      & + .answer {
        max-height: none;
        padding: 1rem 0 1rem 2rem;
      }
      &:before {
        content: '-';
      }
    }
  }
}
.accordion-target {
  max-height: 0;
  overflow: hidden;
  
  &.answer {
    padding: 0;
  }
}