Built-in functionality for collapsing a nested section

[jonathan-s]

It would be neat if there was a built-in way of collapsing a nested section, it would be even better if it were possible to have a hook that could determine whether a nested section should start out collapsed or expanded.

That way you could hide information that is no longer particularly relevant since it has been acted upon already at some point or similar.

[fdintino]

This also seems like a feature that would exist outside of django-nested-admin. If it were added to django-grappelli, for instance, in all likelihood it would work as-is with this project.

[ariannedee]

I've added this to my project. It doesn't have the functionality to remember what was hidden before, but it works for my use case. I agree that this would be a great feature to have built-in.

In stacked.html

<h2 class="accordion">
...
<h3 class="accordion ...

In inline.html

{% if fieldset.name %}<h2 class="accordion">...

In your SCSS file (It's not perfect because the accordion and delete icon overlap, but it's functional)

.accordion {
        position: relative;
        padding-right: 50px;
        cursor: pointer;

        &:before {
            font-family: 'Font Awesome 5 Free';
            font-size: 12px;
            font-weight: 900;

            position: absolute;
            top: calc(50% - 6px);
            right: 20px;

            content: '\f078';
            transition: all 0.3s ease;
            transform: rotate(-180deg);
        }

        &.closed:before {
            transform: rotate(0);
        }
    }

JS that's added to each ModelAdmin

        // For inline group items, hide their fieldsets and nested inlines
        $("h3.accordion").click(function(e) {
            if (e.target.nodeName !== 'A') {
                var panel = $(this).siblings("fieldset, div.inline-group");
                panel.slideToggle();
                $(this).toggleClass('closed');
            }
        });

        // For fieldsets, hide their fields
        // For inline group, hide their items and the add row line
        $("h2.accordion").click(function (e) {
            if (e.target.nodeName !== 'A') {
                var panel = $(this).siblings("div.items, div.add-item, div.form-field");
                panel.slideToggle();
                $(this).toggleClass('closed');
            }
        });