expand-all.vtl

#** ===========================================================================
EXPAND ALL

This Confluence user macro toggles/expands/collapses all Expand sections on 
your page. 

Version:    1.1.0
Updated:    2022-01-09
Author/s:   George Lewe
Source:     https://github.com/glewe/confluence-user-macros
License:    GNU LGPLv3

Macro Body processing: No macro body
*#

#** ---------------------------------------------------------------------------
PARAMETER
*#
## @noparams

#** ---------------------------------------------------------------------------
OUTPUT
*#
<!-- User Macro: Expand All START -->
<div class="aui-buttons">
    <button class="aui-button" id="toggleAll" title="Toggles all Expand sections on the page. Expanded ones will collapse, collapsed ones will expand.">Toggle All</button>
    <button class="aui-button" id="expandAll" title="Expands all Expand sections on the page.">Expand All</button>
    <button class="aui-button" id="collapseAll" title="Collapses all Expand sections on the page.">Collapse All</button>
</div>

<script type="text/javascript">
AJS.toInit(function () {
   
    AJS.$('#toggleAll').click(function() {
        jQuery(".expand-control").each(function(){
            var $expander=$(this);
            var $expanderIcon=$(".expand-control-icon", $expander);
            var $expanderContent=$(".expand-content",$expander.closest(".expand-container")).first();
            if ($expanderContent.hasClass("expand-hidden")){
                $expanderContent.show();
                $expanderContent.animate({opacity:1});
            } else {
                $expanderContent.hide();
                $expanderContent.animate({opacity:0});
            }
            $expanderContent.toggleClass("expand-hidden");
            $expanderIcon.toggleClass("expanded");
        })
    });
   
    AJS.$('#expandAll').click(function() {
        jQuery(".expand-control").each(function(){
            var $expander=$(this);
            var $expanderIcon=$(".expand-control-icon", $expander);
            var $expanderContent=$(".expand-content",$expander.closest(".expand-container")).first();
            $expanderContent.show();
            $expanderContent.animate({opacity:1});
            $expanderContent.toggleClass("expand-hidden",false);
            $expanderIcon.toggleClass("expanded",true);
        })
    });

    AJS.$('#collapseAll').click(function() {
        jQuery(".expand-control").each(function(){
            var $expander=$(this);
            var $expanderIcon=$(".expand-control-icon", $expander);
            var $expanderContent=$(".expand-content",$expander.closest(".expand-container")).first();
            $expanderContent.hide();
            $expanderContent.animate({opacity:0});
            $expanderContent.toggleClass("expand-hidden",true);
            $expanderIcon.toggleClass("expanded",false);
        })
    });
   
});
</script>
<!-- User Macro: Expand All END -->