/**********************************
 *  HIDEBOX
 * This script provides functionality to dynamically adjust the layout of a webpage's grid system.
 * It allows elements within a grid to be hidden and the remaining grid elements to expand,
 * filling the available space for a more fluid and responsive user experience.
 **********************************/

// Attach event listeners to elements designated with the '.clickHide' class.
document.querySelectorAll(".clickHide").forEach(function (element) {
  element.addEventListener("click", function () {
    // Locate the closest '.row' ancestor to the clicked element.
    // This serves as the reference point for adjusting the grid layout.
    const parentRow = this.closest(".row");

    // Hide the closest parent column of the clicked element, either '.col-xl-6' or '.col-lg-6'.
    const closestParent = this.closest(".col-xl-6, .col-lg-6");
    if (closestParent) {
      closestParent.style.display = "none"; // This makes the column invisible, effectively removing it from the layout.
    }

    // For all elements within the parent '.row' that have a class of '.col-xl-6',
    // change them to '.col-xl-12' to utilize the full width of the row.
    parentRow.querySelectorAll(".col-xl-6").forEach(function (col) {
      col.classList.remove("col-xl-6");
      col.classList.add("col-xl-12");
    });

    // Similarly, adjust '.col-lg-6' columns within the parent row to '.col-lg-12',
    // allowing them to expand and fill the available space.
    parentRow.querySelectorAll(".col-lg-6").forEach(function (col) {
      col.classList.remove("col-lg-6");
      col.classList.add("col-lg-12");
    });
  });
});