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

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    var content = this.nextElementSibling;
    var isCurrentlyOpen = content.style.display === "block" || content.style.display === "grid";

    // 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) {
          siblings[j].classList.remove("active");
          var siblingContent = siblings[j].nextElementSibling;
          if (siblingContent) {
            siblingContent.style.display = "none";
          }
        }
      }
    }

    // Toggle current element
    this.classList.toggle("active");
    if (isCurrentlyOpen) {
      content.style.display = "none";
    } else {
      if (content.classList.contains('chapter-grid')) {
        content.style.display = "grid";
      } else {
        content.style.display = "block";
      }
    }
  });
}