[Craft 4] Please add 'Collapse All' and 'Expand all' to core of Craft

[bencresty]

The matrixtoolbar plugin is out of updates for a long time now and is broken since a long time while the developer doesn't respond to requests and even a PR by @brandonkelly .

Because of this we are lacking 'Collapse all' and 'Expand all' on all our projects on all our matrix fields. We really miss this feature and while on all our pages we use matrix fields to have lots of blocks for content on each page, it's not fun to need to close or open all blocks by hand. That's basically impossible in a normal workflow.

IMO the `Collapse all' and 'Expand all' features are basic features we always want and shouldn't be optional by installing a plugin.

Please, could the 'Collapse all' and 'Expand all' features be added to the core of Craft 4 for making working with matrix blocks easier?

That would be very, very helpful!

Thanks in advance!

[anvart]

MatrixToolbar plugin was great. The only downside was that all the actions there are hidden behind a dropdown. Would be much nicer to have all (or make it configurable) the controls visible and reachable without extra clicks.

[ttempleton]

Please pardon the shameless self-promotion here, but until this functionality is in-built in Craft, we at Spicy Web maintain the Batch Actions plugin for Craft 4, which is a replacement for Matrix Toolbar and which also supports Neo.

[anvart]

Looks nice! Thanks for the promotion, I'll try it now.

[jacobgraf]

This is becoming a bigger and bigger issue for us as our Structures and nesting grows. Search is getting better and better, but sometimes you WANT to visualize the hierarchy and, as-is, you have to go down the whole thing and select each one by one. This should be a core feature by now. Please consider adding it soon. I get anxiety anytime I need to hop into a Structure because it's a jumbled mess of expanded/collapsed items.

[brandonkelly]

There is no way to do it currently that scales for extremely large structures, which is something we have to keep in mind. I have some thoughts on how we could pull it off but it will require a major refactor that would need to wait for 5.0.

[jacobgraf]

@brandonkelly Argh. Is there any way to add a (maybe) simpler option of being able to specify in the Structure settings to always be collapsed by default? For us, we'd rather start with a totally collapsed Structure instead of a jumbled mess of open/closed items to start with.

If it's easy, maybe even being able to specify if each level should be collapsed or expanded by default would help.

In the meantime, your 4.4 fixes for seeing parent/ancestors will help too. Any idea when 4.4 will land?

[lauriechu]

I vote for content blocks collapsed as the default. We're currently working in Craft 5.4.9 and still no solution?

[brandonkelly]

See #8576 for a similar request pertaining to structure indexes.

[brigleb]

Just stopping by to add my vote for this type of feature. It gets cumbersome having to collapse a ton of fields just to make sense of an entry, but honestly, even having a single click to toggle open/closed an entry would help. Requiring multiple clicks just to close a matrix field to organize a series of matrix entries is tedious!

[thupsi]

FYI you can also toggle matrix fields by double clicking on the top bar, but yes, I agree that it would be very convenient to be able to toggle all blocks with a single action!

[brigleb]

I had no idea about the double-clicking, that’s a huge time-saver. Thanks!

[brandonkelly]

You can also click on the checkbox for the first block, then Shift-click on the checkbox for the last block. With all of the blocks selected, press the “Collapse” option on any of them and all selected blocks will be collapsed.

[anvart]

I've got some code in my module which does the job:

1. In the main module file (only for isCpRequest):

/**
 * Adds collapse/uncollapse all buttons for matrix fields
 *
 * @return void
 */
private function addMatrixToolbar(): void
{
    // asset bundle
    Event::on(
        View::class,
        View::EVENT_BEFORE_RENDER_TEMPLATE,
        function (TemplateEvent $event) {
            try {
                Craft::$app->getView()->registerAssetBundle(zgAssetMatrixToolbar::class);
            } catch (InvalidConfigException $e) {
                Craft::error(
                    'Error registering AssetBundle - ' . $e->getMessage(),
                    __METHOD__
                );
            }
        }
    );

    // helper html
    Event::on(
        ElementsController::class,
        ElementsController::EVENT_DEFINE_EDITOR_CONTENT,
        function (DefineElementEditorHtmlEvent $event) {
            $event->html .= Craft::$app->getView()->renderTemplate('zg-matrix-toolbar/matrix-toolbar');
        }
    );
}

2. The js file from the bundle:

let fn_HandleToolbar = function(){
    let $matrixToolbar = $('.zg-matrix-toolbar').clone(true).detach();
    let $matrixFields = $('.field[data-type="craft\\\\fields\\\\Matrix"]');

    if (!$matrixFields.length) return; // Prevent unnecessary execution

    $matrixFields.each(function(){
        let $this = $(this),
            $toolbar = $matrixToolbar.clone(true),
            $blocks = $('.input:first .matrix .blocks', $this),
            $menu = $('.menu', $this),
            $btnCollapseAll = $('[data-action="collapse-all"]', $toolbar),
            $btnExpandAll = $('[data-action="expand-all"]', $toolbar);

        $btnCollapseAll.on('click', function(){
            $('[data-action="collapse"]', $menu).trigger('click');
        });
        $btnExpandAll.on('click', function(){
            $('[data-action="expand"]', $menu).trigger('click');
        });

        $toolbar.removeClass('hidden');
        $blocks.before($toolbar);
    })
}

$(window).on('load', function () {
    fn_HandleToolbar();
});

3. Finally, the helper template

<div class="zg-matrix-toolbar hidden" style="margin-bottom : 1em">
    <div class="flex">
        <div class="btn" data-action="collapse-all">{{ 'matrix-toolbar.btn.fold' | t('app') }}</div>
        <div class="btn" data-action="expand-all">{{ 'matrix-toolbar.btn.unfold' | t('app') }}</div>
    </div>
    <div style="margin: 1em 0" class="readable"><blockquote>{{ 'matrix-toolbar.hint' | t('app') }}</blockquote></div>
</div>

I know, the code is not great and could be done nicer, I had not time for doing it properly. But it's working! For sure on my 4.9.3. Never tried it on 5.x, chances are high it won't work.

[brandonkelly]

Added “Expand all blocks” and “Collapse all blocks” to Matrix fields’ action menus for Craft 5.8 (#17141).