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);