Django - how to collapse forms like in the django admin
Question: I use [django-form-utils](http://pypi.python.org/pypi/django-form-utils) to
generate BetterModelForm with fieldsets similar to the django admin. With
BetterModelForm its possible to associate CSS with fieldset with the 'classes'
option. I would like to know how I could collapse the fieldset of my form like
we can do it in Django-Admin.

forms.py:

    
    
    class ezAppOptionFormSet(BetterModelForm):
    
    
        class Meta:
            model = EzApp
            fieldsets = [('App options:', {'fields': ['level', 'center_1', 'center_2', 'width', 'height'], 'classes': ['collapse']}),
                    ('Colors:', {'fields': ['color'], 'classes': ['collapse']})
                    ]
    

template.html:

    
    
        <form method="post" action="." encrypt="multipart/form-data">{% csrf_token %}
            <b>App name: {{ App_title }}</b>
            {% if formset.non_field_errors %}{{ formset.non_field_errors }}{% endif %}
            {% for fieldset in formset.fieldsets %}
                <fieldset class="{{ fieldset.classes }}">
                {% if fieldset.legend %}
                    <legend>{{ fieldset.legend }}</legend>
                {% endif %}
                {% if fieldset.description %}
                <p class="description">{{ fieldset.description }}</p>
                {% endif %}
                <ul>
                {% for field in fieldset %}
                    {% if field.is_hidden %}
                        {{ field }}
                    {% else %}
                        <li{{ field.row_attrs }}>
                        {{ field.errors }}
                        {{ field.label_tag }}<br>
                        {{ field }}
                        </li>
                    {% endif %}
                {% endfor %}
                </ul>
                </fieldset>
            {% endfor %}
    


Answer: The way I did it is simply use the collapse.js script of django admin.

In the template, import the script:

    
    
    <script type="text/javascript" src="/admin/jsi18n/"></script>
    <script type="text/javascript" src="/static/admin/js/core.js"></script>
    <script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
    <script type="text/javascript" src="/static/admin/js/jquery.js"></script>
    <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
    <script type="text/javascript" src="/static/admin/js/actions.js"></script>
    <script type="text/javascript" src="/static/js/collapse.js"></script>
    

Then change the tag `<legend>` for `<h2>` and bingo, you have the same
collapse.

    
    
    <form method="post" action="." encrypt="multipart/form-data">{% csrf_token %}
        <b>App name: {{ App_title }}</b>
        {% if formset.non_field_errors %}{{ formset.non_field_errors }}{% endif %}
        {% for fieldset in formset.fieldsets %}
            <fieldset class="{{ fieldset.classes }}">
            {% if fieldset.legend %}
                <h2>{{ fieldset.legend }}</h2>
            {% endif %}
            {% if fieldset.description %}
            <p class="description">{{ fieldset.description }}</p>
            {% endif %}
            <ul>
            {% for field in fieldset %}
                {% if field.is_hidden %}
                    {{ field }}
                {% else %}
                    <li{{ field.row_attrs }}>
                    {{ field.errors }}
                    {{ field.label_tag }}<br>
                    {{ field }}
                    </li>
                {% endif %}
            {% endfor %}
            </ul>
            </fieldset>
        {% endfor %}
    

