McAtee

by mrjordy

HTML

Still have to do:
<div class="accordionMenuBar">
  <div class="accordionMenu1 closeAll">close all</div>
  <div class="accordionMenu2 expandAll">expand all</div>
  <div class="accordionMenu3 personType1">hideshow based on person type 1</div>
  <div class="accordionMenu4 personType2">hideshow based on person type 2</div>
  <div class="accordionMenu5 personType3">hideshow based on person type 3</div>
</div>
<p></p>
<div class="accordionTrigger">1.0 Introduction to the Navy Cloud Technical Integration Guide</div>
<div class="accordionPane show">
  <p>text</p>
</div>

<div class="accordionTrigger">2.0 TIG General Scope</div>
<div class="accordionPane show">
  <p>text</p>
</div>

<div class="accordionTrigger">3.0 TIG Key Assumptions</div>
<div class="accordionPane show">
  <p>text</p>
</div>

<div class="accordionTrigger">4.0 Cloud Adoption Planning and Preparation Framework</div>
<div class="accordionPane show">
  <p>text</p>
</div>

CSS

.accordionTrigger {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px 40px;
  transition: 0.4s;
}

.accordionTrigger::before {
    font-family: sans-serif;
    font-size: 30px;
    line-height: 20px;
    text-align: center;
    content: '+';
    display: block;
    position: absolute;
    color: teal;
    transform: rotate(45deg);
    transition: 0.2s;
    margin-left: -28px;
    opacity: 0.4;
}

.accordionTrigger.inactive::before {
    transform: rotate(0deg);
}

.accordionTrigger.inactive,
.accordionTrigger:hover {
  background-color: #ddd;
}

.accordionPane {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}


.accordionPane.show {
  opacity: 1;
  max-height: 500px;
}

JavaScript

// Event delegation
document.addEventListener("click", delegate(accFilter, accHandler));

// Common helper for event delegation.
function delegate(criteria, listener) {
  return function(e) {
    var el = e.target;
    do {
      if (!criteria(el)) {
        continue;
      }
      e.delegateTarget = el;
      listener.call(this, e);
      return;
    } while ((el = el.parentNode));
  };
}

// Custom filter to check for required DOM elements
function accFilter(elem) {
  return (elem instanceof HTMLElement) && elem.matches(".accordionTrigger");
}

// Custom event handler function
function accHandler(e) {
  var acc = e.delegateTarget;
  acc.classList.toggle("inactive");
  acc.nextElementSibling.classList.toggle("show");

  var otherAccordions = getSiblings(acc.nextElementSibling, '.accordionPane');
  otherAccordions.forEach(function(otherAcc) {
    otherAcc.classList.remove('show');
    otherAcc.previousElementSibling.classList.remove("inactive");
  })
}