Suggestion: Collapse all / Expand all functionality on matrix fields

[hiasl]

Description

Currently when an entry contains a matrix field each block needs to manually be collapsed or expanded (unless you multiselect them via checkbox). This can become quite time / click consuming, especially if you want to rearrange them. In this case a collapse all (and maybe also expand all) function would be great.

Where to place:

• I would put it next to the label of the matrix field
• If you do not want to "waste" ui space, at least a double click on the label of the matrix field could collapse / expand all blocks.

Additional info

• Craft version: 3

[brandonkelly]

Double-clicking a block titlebar will only collapse/expand the selected block, which is what I would expect to happen. But there is a trick for quickly mass-expanding/collapsing blocks: Click on the first block’s titlebar, and then shift-click on the last block’s titlebar. Then all will be selected. Then click the cog icon and click Expand/Collapse, and that will affect all selected blocks.

[hiasl]

Thanks for the tip, just tried, works like a charm. I still think this would be very handsome, this is 4 clicks (including holding a key) vs. 1 and to be honest, this is a feature normally available wherever you have to deal with multiple checkboxes (even in other craft overviews...).

[brandonkelly]

Fair enough, just reopened and we can consider it down the road :)

[crazyx13th]

maybe an option at the settings like this?

or a "handle all action bar"

or both 👍

thx

[carlcs]

CMD + A also works to select all blocks when one block of the field is in focus.

[KatieMFritz]

I would love an option (in settings) to collapse blocks by default. I'm using a matrix for a custom menu manager, and it's much easier to visualize and rearrange the items when they're all collapsed. I might try the JS hack suggested in this old StackExchange post in the meantime.

I have a first draft of some instructions (using Sprout Notes) to help my authors remember how to expand/collapse all:

Because going into the site every couple months to make changes, they're not going to remember how to do this. A GUI option for expand/collapse all would be helpful.

[meyerweb]

Adding my support to this idea. I’d love it even more if the field contents were editable when the block is collapsed, but just the ability to easily expand/contract all would be a nice feature.

[narration-sd]

Just saw this, and maybe this FR can attract as a way to solve?

It suggests an audio-board-like Solo button, for many good reasons to use in editing. Click Solo again, and previously visible elements would be seen again. Simple.

#3116

[narration-sd]

...put a little more info in about related #3116

[orangethread]

It sounds like this feature request is going to be considered. Which is awesome. but I want to add my vote here.

The command+a works quite well. Thanks @carlcs

There are still some UX issues that support the idea @crazyx13th is suggesting.

There is not a way to deselect all the blocks.

Even with Command+a, there is a UX issue. To trigger the collaspe or expand, one accesses the dropdown menu in the block's title bar. That title bar is specific to the block, that is how I 'read' the design. So a user could reasonably expect selecting collapse from the block's title would only collapse that specific block, not all of them.

[mediagirl]

We need "Collapse All" and "Expand All" for Matrix fields please.

[matthewstick]

I would love to see this too. This comment had a great suggestion for both options.
#1880 (comment)

What's really tough is that we can have dynamic content blocks in a matrix field. Sometimes one field can have a dozen types. Then each one could have a 1 to 10 items. Think of a matrix holding a gallery, FAQ, general text, specialized text, forms, etc. But it becomes unusable for the end user to scroll through everything.

We really need to start everything as collapsed instead of expanded.

[anvart]

I've been using Matrix Toolbar plugin for that, but it has not got any updates since almost two years.

[aeu]

Please yes, make this happen.

[ItagMichael]

Would be great to have out-of-the box support for this.

The only plugin I know to do it was Matrix Toolbar which seems to be abandoned and longer works.

[anvart]

I wrote some quick-and-dirty (sorry for the quality) code, inspired by the original Matrix Toolbar plugin. You need a module to make it work.

JS

$(window).on('load', function () {
    let fn_HandleToolbar = function(){
        let $matrixToolbar = $('.zg-matrix-toolbar'),
            $matrixFields = $('.field[data-type="craft\\\\fields\\\\Matrix"]');

        $matrixToolbar.detach();

        $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);
        })
    }
});

Hooks

Craft::$app->view->hook('cp.entries.edit.content', function() {
    return Craft::$app->getView()->renderTemplate('zg/matrix-toolbar');
});

Craft::$app->view->hook('cp.globals.edit.content', function() {
    return Craft::$app->getView()->renderTemplate('zg/matrix-toolbar');
});

If you have matrix blocks in your Caregories, you will have to add the template using cp.categories.edit.content hook.

Template

<div class="zg-matrix-toolbar flex hidden">
    <div class="btn" data-action="collapse-all">Collapse all</div>
    <div class="btn" data-action="expand-all">Expand all</div>
</div>

When I find time, I'll clean it up and make a proper plugin.

[khalwat]

Related tip: if you have a bunch of matrix blocks selected, you can de-select them all by Command-clicking on any block's title bar

[chrisjbr]

I wrote a plugin which collapses all matrix blocks by default, and allows the editor to expand each one with a single click. Hope it helps! https://plugins.craftcms.com/matrix-snap

[gregorterrill]

To revive this old discussion - any chance we could see "Collapse all" and "Expand all" added to the dropdown where "Copy all entries" was just added in 5.7? This would be incredibly useful.

[brandonkelly]

Literally just added this earlier today :)

[brandonkelly]

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