Accordion useful JavaScript features

Early returns

In einem früheren Schritt haben wir geprüft, ob .accordion-header ein Vorfahr von e.target ist:

accordionContainer.addEventListener('click'), e => {
  const accordionHeader = e.target.closest('.accordion-header');
  if (accordionHeader) {
    // toggle acc
  } else {
    // do nothing - können wir uns hier sparen ...
  }
}

Das lässt sich mit einem early return eleganter lösen:

accordionContainer.addEventListener('click', e => {
  const accordionHeader = e.target.closest('.accordion-header');
  if (!accordionHeader) return;

  // Open and close accordion
});

Using ternary operators

Um die Höhe des Accordeons zu ermitteln, haben wir folgenden Code geschrieben:

let height;

if (accordion.classList.contains('is-open')) {
  height = 0;
} else {
  height = accordionInner.getBoundingClientRect().height;
}

Das können wir knapper formulieren:

const height = accordion.classList.contains('is-open')
  ? 0
  : accordionInner.getBoundingClientRect().height;