Minimize the list filter in django-admin

Question

I quite like the filter feature of django admin views (list_filter).

But, on views with a lot of fields, I would really like the ability to minimize/expand it with a click, to save screen real-estate and also because it sometimes actually hides stuff.

Is there an easy way to add a collapse button (some already existing plugin I haven't found or something similar)?

Answer 1

Given that you now have jQuery in django admin, it's easy to bind a slideToggle() to the titles in the List Filter.

This seems enough Javascript for it to work:

// Fancier version https://gist.github.com/985283 

;(function($){ $(document).ready(function(){
    $('#changelist-filter').children('h3').each(function(){
        var $title = $(this);
        $title.click(function(){
            $title.next().slideToggle();
        });
    });   
  });
})(django.jQuery);

Then in the ModelAdmin subclass you want to activate that set the Media inner class:

class MyModelAdmin(admin.ModelAdmin):
  list_filter = ['bla', 'bleh']
  class Media:
    js = ['js/list_filter_collapse.js']

Make sure to drop the list_filter_collapse.js file in a 'js' folder inside your STATIC_DIRS or STATIC_ROOT (Depending on your Django version)

Answer 2

I changed Jj's answer to collapse the whole filter when clicking on the 'filter' title, adding it here for completeness, a gist is available here:

(function($){
ListFilterCollapsePrototype = {
    bindToggle: function(){
        var that = this;
        this.$filterTitle.click(function(){
            that.$filterContent.slideToggle();
            that.$list.toggleClass('filtered');
        });
    },
    init: function(filterEl) {
        this.$filterTitle = $(filterEl).children('h2');
        this.$filterContent = $(filterEl).children('h3, ul');
        $(this.$filterTitle).css('cursor', 'pointer');
        this.$list = $('#changelist');
        this.bindToggle();
    }
}
function ListFilterCollapse(filterEl) {
    this.init(filterEl);
}
ListFilterCollapse.prototype = ListFilterCollapsePrototype;

$(document).ready(function(){
    $('#changelist-filter').each(function(){
        var collapser = new ListFilterCollapse(this);
    });
});
})(django.jQuery);