trying to show/hide the change_list filter in django admin

i'm trying to show hide the filter box(the grey box on the right) of the django admin change_list.html page.

I tried to create a simple javascript function and add it into the extra head like

{% extends "admin/change_list.html" %}
{% block extrastyle %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}js/jquery-1.6.1.js" ></script>
<script>
    function toggle-filter() {
        $("#changelist-filter").toggle("slow");
    };
</script>
{% endblock %}

Then I added a hyperlink an开发者_JAVA百科d tried to get it to run that function like this

{% block object-tools %}
    <ul class="object-tools">
<li><a onclick="toggle-filter()" id="hideBut" href="#" class="viewsitelink">{% trans "Toggle Filter" %}</a></li>
    </ul>
{% endblock %}

But this doesn't do anything. How can I get that filterbox to hide?

OK what I did was I added some javascript into the change_list.html like this:

<script type="text/javascript">
(function($) {
    $(document).ready(function($) {
        $("tr input.action-select").actions();
        $('<div id="show-filters" style="float: right;"><a href="#">Show Filters</a></p>').prependTo('div.actions');
        $('#show-filters').hide();
        $('#changelist-filter h2').html('<a style="color: white;" id="hide-filters" href="#">Filter &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);
</script>

Worked like a charm. I found the actual javascript here.

Hyphens aren't valid characters in JavaScript identifiers (you might find this question on valid JavaScript variable names useful - note that variables names and function names both count as "Identifiers").

Try changing your function name to toggle_filter.

You can can add javascript to admin pages in the ModelAdmin media class. Put a function in there to collapse the filter.

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

Here is a page with a different way of achieving the what you want, without hacking your admin templates. This seems like a cleaner approach to me.

Minimize the list filter in django-admin

No a direct answer, yet grappelli https://github.com/sehmaschine/django-grappelli provides this feature out of the box and use javascript code accordingly to show hide the filters, but you likely already know about grapelli /HTH