Question

I use 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 1

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 %}