implementing an "expand all" option on your Confluence page

[#1]

I was frustrated by the lack of options I was finding when I searched the community for a way to give users a one-click method for expanding all collapsed sections on a Confluence KB page (on an FAQ page, for example), so when my tech team solved the problem for me, I thought I'd share it with you all.

The key is to use the UI Expand macro for the collapsible sections (I had been using the Expand macro). Then you add an HTML macro to the page with script like this:

<script language="JavaScript"> function expandUI(){ var a = document.getElementsByClassName("rwui_expandable_item_title rwui_expand"); for (let i = 0; i < a.length; i++){ a[i].click(); } } </script> <input type="button" value="Expand All" onClick="expandUI();">

Our page starts off with the sections all collapsed. When the user clicks the button created by this HTML macro, all of the collapsed sections expand.

Works perfectly!

[Thomas Schlegel]

Hi @Diane G ,

thank you for sharing the solution - but please be aware of the potential security risk you take by enabling the html macro. 

A user can enter any html with this macro, maybe harmless, maybe not.  

I would always put such a script into a user macro and publish this user macro instead of the html macro.

[Darin Lory]

How to you find the "Expand All" macro to install in confluence?

[Lynn Long]

Wondering if on UI expand marco is expanded and the other is not. Is there a way to have one button that opens them all and closes them all ? 

[Paul Streng]

Any modifications to the HTML above to Expand all of the "Expand" Macros on the page?  We want to enable all the FAQs on one page to expand using this button.

[Daniel G_ Sinclair]

At the very least I wish you could set the expand box to autoexpand on load so that search can work.

It's a pity that searching the page (browser search) can't find things in collapsed sections.

[jdeklerk]

Unclear if this will still help anyone on DC, but the way that we have worked around the out-the-box limitation is to create some user macros containing javascript.

This means all of our users can make use of the macros and it avoids using the HTML macro.

Button to toggle expand/collapse all

## @noparams
<button name="toggleAll" id="toggleAll" type="button" class="aui-button aui-button-primary">Expand/Collapse</button>

<script type="text/javascript">
AJS.toInit(function ()
{
AJS.$('#toggleAll').click(function()
{
jQuery(".expand-control").each(function(){ jQuery(this).trigger("click");})
});
});
</script>

Expand all macros by default on page load

## @noparams
<script type="text/javascript">
window.onload = function() {
AJS.$(".expand-container .expand-control").click();
};
</script>

 This should mean that you can add both macros to a page if you want all expands to start expanded and have the option to collapse them all.

This should also me that an in page search should pick up text in the expanded sections on load.

Obligatory warning that if you have a page with a large amount of data within expands, then using either/both will make the page load a little longer and show a bunch more content.

Bonus Note:

It seems that Confluence has no good way of uniquely identifying each Expand macro if it was the case that you wanted to expand some, but not all expand macros.

One of the ways to force this is using something like the HTML macro to define expands manually and then referencing those expands in another macro. For those curious, a rough solution could look like this:

HTML macro Expands

Enclose your Expand macro inside an HTML macro

{html:id=unique1}
    {expand}
    Your expandable content here
    {expand}
{html}

Expanding Macro

## @noparams
##
<script type="text/javascript">
    window.onload = function() {
        AJS.$("#unique1 .expand-control").click();
        AJS.$("#unique2 .expand-control").click();
        .....
        AJS.$("#uniquen .expand-control").click();
    };
</script>

Where you just need to enter the id(s) of the ones you want expanding, e.g. in the HTML macro the id=unique1 and in the Expanding macro we called the #unique1 variable.

To echo the warning of those that came before:

...

please be aware of the potential security risk you take by enabling the html macro. 

A user can enter any html with this macro, maybe harmless, maybe not.

...

                                                                                                        - Thomas Schlegel