Toggle Django Admin Filter Panel

django-admin-toggle-filter-panel.jquery.js

(function($) {
       $(document).ready(function($) {
           $("tr input.action-select").actions();
           $('<div id="show-filters" style="float: right;"><a href="#">&larr; 필터 보기</a></p>').prependTo('div.actions');
           $('#show-filters').hide();
           $('#changelist-filter h2').html('<a style="color: white;" id="hide-filters" href="#">필터 &rarr;</a>');

           $('#show-filters').click(function() {
               $('#changelist-filter').show('fast');
               $('#changelist').addClass('filtered');
               $('#show-filters').hide();
           });

           $('#hide-filters').click( function() {
               $('#changelist-filter').hide('fast');
               $('#show-filters').show();
               $('#changelist').removeClass('filtered');
           });
       });
})(django.jQuery);

Converted with pure JS with Copilot

document.addEventListener("DOMContentLoaded", function () {
  const actionSelectInputs = document.querySelectorAll(
    "tr input.action-select"
  );
  actionSelectInputs.forEach(function (input) {
    const showFiltersLink = document.createElement("a");
    showFiltersLink.href = "#";
    showFiltersLink.textContent = "← 필터 보기";
    const showFiltersDiv = document.createElement("div");
    showFiltersDiv.id = "show-filters";
    showFiltersDiv.style.float = "right";
    showFiltersDiv.appendChild(showFiltersLink);
    const actionsDiv = document.querySelector("div.actions");
    actionsDiv.insertBefore(showFiltersDiv, actionsDiv.firstChild);
    showFiltersDiv.style.display = "none";

    const hideFiltersLink = document.createElement("a");
    hideFiltersLink.href = "#";
    hideFiltersLink.style.color = "white";
    hideFiltersLink.id = "hide-filters";
    hideFiltersLink.textContent = "필터 →";
    const changelistFilterH2 = document.querySelector("#changelist-filter h2");
    changelistFilterH2.innerHTML = "";
    changelistFilterH2.appendChild(hideFiltersLink);

    showFiltersLink.addEventListener("click", function () {
      const changelistFilter = document.querySelector("#changelist-filter");
      changelistFilter.style.display = "block";
      const changelist = document.querySelector("#changelist");
      changelist.classList.add("filtered");
      showFiltersDiv.style.display = "none";
    });

    hideFiltersLink.addEventListener("click", function () {
      const changelistFilter = document.querySelector("#changelist-filter");
      changelistFilter.style.display = "none";
      showFiltersDiv.style.display = "block";
      const changelist = document.querySelector("#changelist");
      changelist.classList.remove("filtered");
    });
  });
});

Add like below in admin.py

class SampleModelAdmin(admin.ModelAdmin):
    # ...
    class Media:
        js = ("js/admin_overrides.js",)
        css = {"all": ("css/admin_overrides.css",)}