mobile_facets/js/mobile_facets.js

(function (Drupal) {  // Select the parent container
  const sidebar = document.querySelector('.region--sidebar');  // Check if the element exists
  if (sidebar) {
    // Get all direct children
    const children = Array.from(sidebar.children);// Create the wrapper div
    const wrapper = document.createElement('div');
    wrapper.classList.add('facet-wrapper');

    // Move each child into the wrapper
    children.forEach(child => {
      wrapper.appendChild(child);
    });

    // Append the wrapper back to the sidebar (replacing the original children)
    sidebar.appendChild(wrapper);  }
  // Select the parent container
  //const sidebar = document.querySelector('.region--sidebar');  // Check if the element exists
  if (sidebar) {
    // Select the existing wrapper
    const wrapper = sidebar.querySelector('.facet-wrapper');// Check if the wrapper exists
    if (wrapper) {
      // Create the button element
      const button = document.createElement('button');
      button.id = 'toggle-facets';
      button.textContent = 'Search the Collection';

      // Insert the button before the wrapper
      sidebar.insertBefore(button, wrapper);
    }  }
  document.addEventListener("DOMContentLoaded", function () {
    const toggleButton = document.getElementById("toggle-facets");
    const facetWrapper = document.querySelector(
      ".region--sidebar .facet-wrapper"
    );if (toggleButton && facetWrapper) {
      toggleButton.addEventListener("click", function () {
        const isHidden =
          facetWrapper.style.display === "none" || !facetWrapper.style.display; // Accounts for CSS default
        facetWrapper.style.display = isHidden ? "block" : "none";
      });
    }  });
})(Drupal);