Django Admin - Add Collapse to Field Set, but Start It

Question

Is there a way to make a field kit collapsible, but start rolling out? When you add collapse to fieldset classes, it gets functionality, but it starts to collapse. I took a look at JS that shows / hides the contents of the set, but it doesn't seem like there is anything there to do what I would like, so I guess I have to roll my own. Just wanted to check before I carry out these efforts.

Answer 1

django-grappelli provides this as one of the functions. Here's a wiki page about this feature (with screenshots).

Answer 2

admin.py:

class PageAdmin(admin.ModelAdmin): fieldsets = ( (None, { 'fields': ('title', 'content', ) }), ('Other Informations', { 'classes': ('collapse', 'open'), 'fields': ('slug', 'create-date',) }), ) 

Templates / app_label / model_name / change_form.html:

 {% extends "admin/model_name/change_form.html" %} {% block extrahead %} {{ block.super }} <script src="{{ STATIC_URL }}admin/js/collapse-open.js" type="text/javascript"></script> {% endblock %} 

static / admin / js / collapse-open.py:

 (function($) { $(document).ready(function() { $('fieldset.collapse.open').removeClass('collapsed'); }); })(django.jQuery); 

Answer 3

I know this is really old, but I also just ran into this problem. Thinking about it too hard, I found a simple solution that seemed to do the job with 0 plugins or extra js.

Inside the fields, Add 'collapse in' is created, not 'collapse' for the class:

 fieldsets = [ ('Start Expanded', { 'fields': ['field1', 'field2', 'field3'], 'classes': ['collapse in',] }) ] 

Answer 4

Starting with Setomidor's answer, I would like to offer a simpler alternative that does exactly what you want (if Grappelli is not an option, obviously).

Create an override of the template as described ( admin/(app)/(model)/change_form.html ) and , instead of deleting the reset effect for the “add” model case, just call the click method for the collider set on the field (i.e. small link with the text show / hide), so that the entire set of fields is expanded as soon as the page loads.

Answer 5

Alignment with grappelli docs only need to add "classes": ("grp-collapse grp-closed")

eg

 class EntryOptions(admin.ModelAdmin): ... fieldsets = ( ('', { 'fields': ('title', 'subtitle', 'slug', 'pub_date', 'status',), }), ('Flags', { 'classes': ('grp-collapse grp-closed',), 'fields' : ('flag_front', 'flag_sticky', 'flag_allow_comments',), }), 

Note: if you use grappelli version <2.4, use "grp-closed" 'collapse-closed' * instead; in fact, "collapse-close" still works, but it is recommended to use new classes

Answer 6

An old question, but I came across the same and came up with an answer that can be implemented using standard django:

create the file: admin / (app) / (model) /change_form.html in the templates directory so that your (model) of your (application) uses this form file.

Add this code to the file:

 {% extends "admin/change_form.html" %} {% block extrahead %} <!-- Load superblock (where django.jquery resides) --> {{ block.super }} <!-- only do this on 'add' actions (and not 'change' actions) --> {% if add and adminform %} <script type="text/javascript"> (function($) { $(document).ready(function($) { //Remove the 'collapsed' class to make the fieldset open $('.collapse').removeClass('collapsed'); //Remove the show/hide links $('.collapse h2 a').remove(); //Tidy up by removing the parenthesis from all headings var $headings = $(".collapse h2"); $headings.each(function(i, current){ var str = $(current).text(); parenthesisStart = str.indexOf('('); $(current).text(str.substring(0, parenthesisStart)); }); }); })(django.jQuery); </script> {% endif %} {% endblock %} 

For more information about using django.jQuery instead of “regular” jQuery, see http://blog.picante.co.nz/post/Customizing-Django-Admin-with-jQuery--Getting--is-not-a- function /

Answer 7

The fastest hack I could find was to add a new start-open class to fieldset

 classes = ['collapse', 'start-open'] 

and then change static/admin/js/collapse.js .

from:

  // Add toggle to anchor tag var toggles = document.querySelectorAll('fieldset.collapse a.collapse-toggle'); var toggleFunc = function(ev) { ev.preventDefault(); var fieldset = closestElem(this, 'fieldset'); if (fieldset.classList.contains('collapsed')) { // Show this.textContent = gettext('Hide'); fieldset.classList.remove('collapsed'); } else { // Hide this.textContent = gettext('Show'); fieldset.classList.add('collapsed'); } }; for (i = 0; i < toggles.length; i++) { toggles[i].addEventListener('click', toggleFunc); } 

in:

  // Add toggle to anchor tag var toggles = document.querySelectorAll('fieldset.collapse a.collapse-toggle'); // NEW: select toggles to open var open_toggles = document.querySelectorAll('fieldset.collapse.start-open a.collapse-toggle'); var toggleFunc = function(ev) { ev.preventDefault(); var fieldset = closestElem(this, 'fieldset'); if (fieldset.classList.contains('collapsed')) { // Show this.textContent = gettext('Hide'); fieldset.classList.remove('collapsed'); } else { // Hide this.textContent = gettext('Show'); fieldset.classList.add('collapsed'); } }; for (i = 0; i < toggles.length; i++) { toggles[i].addEventListener('click', toggleFunc); } // NEW: open toggles for (i = 0; i < open_toggles.length; i++) { toggles[i].click(); }