make columns checkboxes container toggle-able

column_toggle/static/column_toggle/column_toggle.js

@@ -21,9 +21,14 @@ document.addEventListener("DOMContentLoaded", function () {
           field: field,
         };
       });
+
+    // Create the container for the checkboxes
     const container = document.createElement("div");
     container.classList.add("column-toggle-container");
 
+    // Initially hide the checkboxes container
+    container.style.display = "none";
+
     const shouldShowAllColumns =
       !defaultSelectedColumns || defaultSelectedColumns.length === 0;
 
@@ -46,6 +51,15 @@ document.addEventListener("DOMContentLoaded", function () {
       container.appendChild(label);
     });
 
+    // Find the toggle link in the HTML
+    const toggleLink = document.getElementById("toggle-columns-link");
+    if (toggleLink) {
+      toggleLink.addEventListener("click", (event) => {
+        event.preventDefault();
+        container.style.display = container.style.display === "none" ? "flex" : "none";
+      });
+    }
+
     const actionsContainer = document.querySelector("div.actions");
     if (actionsContainer) {
       actionsContainer.parentNode.insertBefore(
@@ -83,4 +97,7 @@ document.addEventListener("DOMContentLoaded", function () {
     }
     localStorage.setItem(storageKey, JSON.stringify(storedSelectedColumns));
   }
+
+  // Call createColumnToggle with default parameters for testing
+  createColumnToggle([], 'column-toggle-storage');
 });

column_toggle/templates/column_toggle/change_list.html

@@ -1,6 +1,12 @@
 {% extends "admin/change_list.html" %}
+{% load i18n %}
 
 {% block extrahead %}
   {{ block.super }}
   {{ column_toggle_html }}
 {% endblock %}
+
+{% block object-tools-items %}
+<li><a href="#" id="toggle-columns-link">{% translate 'Columns' %}</a></li>
+{{ block.super }}
+{% endblock object-tools-items %}