implementing an "expand all" option on your Confluence page

Diane G July 16, 2019

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!

6 comments

Thomas Schlegel
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
July 16, 2019

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.

Like # people like this
Darin Lory March 24, 2020

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

Like Jessica Martin likes this
Lynn Long April 1, 2020

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 ? 

Like # people like this
Paul Streng July 30, 2021

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 August 11, 2022

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.

Phil Bustin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 24, 2023

I would vote for that, as well as expand and collapse all options in the navigation ellipses for every page level containing sub-pages.

jdeklerk January 12, 2024

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

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events