Experience Sitecore ! | Productivity improvement: implementing Expand all and Collapse all buttons to Content Editor

Experience Sitecore !

More than 200 articles about the best DXP by Martin Miles

Productivity improvement: implementing Expand all and Collapse all buttons to Content Editor

One day I was working on a page that had way too many Content Editor section opened, plus those plenty coming out from Standard fields also added frustration. I thought it would be great to have Collapse All button implemented, that closes all the sections in order to help navigation. 

I went checking the way Content Editor works this out and later wrote a JavaScript snippet, that implements and wires desired functionality. I also added Expand All button bringing the reverse behavior. Here's the code:

scContentEditor.prototype.onDomReady = function (evt) {
    this.addCollapser(window.jQuery || window.$sc);
};
scContentEditor.prototype.addCollapser = function ($) {
    $ = $ || window.jQuery || window.$sc;
    if (!$) { return; }

    $('#EditorTabs').append("<style>.toggler { border: 1px solid #bdbdbd; box-shadow: 0 1px #ffffff inset; cursor: pointer; height: 35px; margin: 16px 1px 0; }</style>");
    $('#EditorTabs').append("<button id='expander' class='toggler'>Expand all</button><button id='collapser' class='toggler'>Collapse all</button>");
    $('#EditorTabs').on("click", "#collapser", function () {

        $('.scEditorSectionCaptionExpanded').each(function () {
            var script = $(this).attr("onclick");
            eval(script);
        });
        return false;
    });
    $('#EditorTabs').on("click", "#expander", function () {

        $('.scEditorSectionCaptionCollapsed').each(function () {
            var script = $(this).attr("onclick");
            eval(script);
        });
        return false;
    });
};

All you need to do is to append to the bottom of <your_web_root>\sitecore\shell\Applications\Content Manager\Content Editor.js and that's it!

For those like me who like automation, I am attaching this JavaScript file, right click this link and save it, and then use PowerShell:

$file2 = Get-Content "ExpanderCollapser.js"
Add-Content "C:\inetpub\wwwroot\<YOUR_WEB_ROOT>\sitecore\shell\Applications\Content Manager\Content Editor.js" $file2

Once done, you'll see the result in Content:



There is also package available for download (compatible with Sitecore 9.0.* - 9.2)


Pingbacks and trackbacks (1)+

Comments are closed