var coll = document.getElementsByClassName("collapsible");
var i;

function setOpen(button, open) {
  var content = button.nextElementSibling;
  button.classList.toggle("active", open);
  button.setAttribute("aria-expanded", open ? "true" : "false");
  if (!content) {
    return;
  }
  if (!open) {
    content.style.display = "none";
  } else if (content.classList.contains('chapter-grid')) {
    content.style.display = "grid";
  } else {
    content.style.display = "block";
  }
}

for (i = 0; i < coll.length; i++) {
  coll[i].setAttribute("aria-expanded", "false");
  coll[i].addEventListener("click", function() {
    var content = this.nextElementSibling;
    // computed style, so content hidden by a stylesheet counts as closed
    var isCurrentlyOpen = content && getComputedStyle(content).display !== "none";

    // If this collapsible has a parent with book-grid class, close all siblings in that grid
    var parentGrid = this.closest('.book-grid');
    if (parentGrid) {
      var siblings = parentGrid.querySelectorAll('.collapsible');
      for (var j = 0; j < siblings.length; j++) {
        if (siblings[j] !== this) {
          setOpen(siblings[j], false);
        }
      }
    }

    setOpen(this, !isCurrentlyOpen);
  });
}