nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to create an "Expand All" button for Confluence

Timothy Chen

I've been using the expand macro a lot to organise my data (like a faq) but and am now having trouble searching for things (using the quick search). I can use the quick search to locate the page I'm after. But then I need to manually toggle open each and every expand field, before I can use the normal cntrl-f to find what I'm looking for.

Does anyone know of a way I can install an addon with this Expand All feature, or possibly a way to code my own macro?

A massive thanks in advance for helping!

Tim

Accepted answers

ernie chang

Discused in the documention - not a macro, but a javscript solution.

https://confluence.atlassian.com/display/DOC/Expand+Macro?focusedCommentId=452100227#comment-452100227

All comments

Chung Park Chan

Maybe this can help?

http://www.adaptavist.com/display/AtlassianConfluence/cloak+macro

Timothy Chen

Thanks for that Chung, however this seems different from the usual {expand} macro that comes with confluence. Do you know how to do the same thing with the {expand} macro?

Chung Park Chan

I don't think so you can do so. IMO, the expand macro is used to expand 'part by part' - if you want to choose to expand all, you can put all information into one single expand (that defeats its purpose).

Timothy Chen

Yep I think you are right, that would defeat the purpose.
So in summary, I definitely cannot create my own user macro to do this?

ernie chang

Discused in the documention - not a macro, but a javscript solution.

https://confluence.atlassian.com/display/DOC/Expand+Macro?focusedCommentId=452100227#comment-452100227

Timothy Chen

Thanks Ernie, your comments and code is really helpful.
This should be all we need for now!

Timothy Chen

Documention for toggle all - not a macro, but a javscript solution.

https://confluence.atlassian.com/display/DOC/Expand+Macro?focusedCommentId=452100227#comment-452100227

amna

hello , i don't know if you find the solution but after looking in to a lot of pages i tried this and it work :

1- first create user macro:

general configuration -> user macro >create a user Macro

name your macro expandall then past this and save it :

## Macro title: Expand All

## Macro has a body: N

## Developed by: George Lewe

## Date created: 2014-09-22

## Installed by: George Lewe

## @noparams

<a id="toggleAll" href="#">Expand/Collapse All</a>

AJS.toInit(function ()

{

AJS.$('#toggleAll').click(function()

{

jQuery(".expand-control").each(function(){ jQuery(this).trigger("click");})

});

</script>

2-if you want to put this macro on one page you can just do this

{expandall}

but if you want to add this to all pages in the confluence :

go to look and feel -> layout -> page layout -> add it where you want :

#set($helper = $action.helper)

$helper.renderConfluenceMacro("{expandall}")

Thank you,

Amna

Raymond Santangelo

That was exactly what we needed, worked like a charm ... you rock, Amna!

DebbieR

Hi, Is there another way to add this to all pages when you use the Documentation theme as I get a message "You can not customise the site look and feel while a theme is active. You must first disable the currently configured theme."? Thanks

David May

No user macro required. Stick this at the bottom of the page in an HTML macro and you're done.

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

Ben Coughlan_pdbfjf

Step 1: Insert a html macro.

Step 2 : Paste the following.

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

Step 3: Throw the feet up smile

Dmitry Ree_qly825

this links directs to the confluence documentation

ryan harvey1

yeah, I wish I were able to see the javascript solution that Timothy finds so helpful. This documentation page is exactly the opposite of what I'm looking for: it shows how to implement the "expand" section that I find so annoying!

Kelly Johnson2

This was great. Worked perfectly.

Anand Tungaturt

Threw my feet up. Yay!

Thanks a lot.

Frank_Spafford

I wish I could use an HTML macro, but this feature is not enabled and it seems to require system-administrator privilege. I sure wish Confluence was not so restrictive. Thanks for the tip.

rinky choudhary

Works like a charm!

Rob Powers_k0t386

If you can edit the page then you can search the content without the need for any macro.

Scott Fordin

Brilliant, Ben! I just tweaked the first line of your HTML to use a <button> element instead of an <a href> element:

<p align="center"><button name="toggleAll" id="toggleAll" type:"button">Expand/Collapse All Sections</button></p>

This makes a nifty centered button, and also doesn't alter the URL in the browser address bar. Everything otherwise works the same as the code you so kindly posted.

Thanks again!

boardtc

Works brilliant but note that if you have more than one expand macro on the page all will be open. Any solution to do that?

Ray K.

Is there a way to do this for UI-Expand (NOT regular Expand)?

Ray K.

Never mind, I figured it out! The UI-Expand class name is "rwui_expand"!

Jerry O Sullivan

$(".expand-control").first().trigger('click');

I only wanted to expand my first block and altered the code this way....Thanks David May

Anna Andersson

I'm trying to fond out how to create a Expand/Collaps All macro for UI-Expand.

Could you please describe how you solved it?

Katie Crick

Cecilia I was also trying to figure it out and came across his more descriptive answer in another forum. :-)

Ray K.:

I took the code from the Atlassian forum and changed it from this:

jQuery(".expand-control").each(function(){ jQuery(this).trigger("click");})

to this...

jQuery(".rwui_expand").each(function(){ jQuery(this).trigger("click");})

Works like a champ!

Scott Fordin

Okay, this is pretty much a total rework of the Expand/Collapse script that I previously posted, which was in turn a riff on Ben Coughlan's excellent starter script.

My new script builds on the original, but takes several different approaches. The following are some key features of this new version:

There are actually two scripts here, embedded in a single text file:
- "Expand All" expands all content contained in Confluence EXPAND macros, regardless of the current macro state (that is, expanded or collapsed).
- "Collapse All" collapses all EXPAND content, likewise regardless of the current macro state.
It's worth reiterating that the expand/collapse behavior in this new code differs in an important way from the previous version; specifically:
- In the previous version, the expand/collapse behavior was a page-wide toggle: that is, all expanded topics were collapsed, and all collapsed topics were expanded. If a user had opened some topics but not others, the script would just flip/flop the state of things. This made it difficult for users to confidently attain an "everything expanded" or "everything collapsed" page state.
- By contrast, in this new version, "Expand All" means just that: expand everything regardless of its current expand/collapse state. "Collapse All," similarly, collapses everything regardless of it current state.
The size and placement of the control buttons, button block, and block text are now determined by a small set of CSS declarations embedded with the script. You can customize these styles to your liking, or just use the defaults that I've defined here.
- By default, the Expand All/Collapse control buttons are now much smaller and less intrusive.
- By default, the button block is also much smaller now, and floats in a fixed position at the bottom-left corner of the page, regardless of the page scroll position.

Enough talk. Here is the code:

<!-- ====================================================== -->
<!-- "EXPAND ALL" AND "COLLAPSE ALL" SCRIPTS FOR CONFLUENCE -->
<!-- ====================================================== -->
<!-- AUTHOR
Scott Fordin 2018-2019
-->
<!-- DESCRIPTION
This code provides user-accessible "Expand All" and "Collapse All" controls for use on Confluence wiki pages. 
-- The "Expand All" script expands all content contained in Confluence EXPAND macros, regardless of the current macro state (that is, expanded or collapsed).
-- The "Collapse All" script collapses all content contained in Confluence EXPAND macros, regardless of the current macro state.
-->
<!-- PURPOSE
Typical in-browser text-search mechanisms (for example, Ctrl+F) do not examine page content that is contained in collapsed Confluence EXPAND macros. This means that a user will not obtain comprehensive search results unless s/he first expands all EXPAND macros before performing a given search. Confluence does not provide a native control to open all EXPAND content at once, which means that users must painstakingly open each EXPAND macro manually. To get around these limitations, the "Expand All" script expands all EXPAND macros, regardless of the current macro state. Conversely, the "Collapse All" button collapses all EXPAND macros.
-->
<!-- IMPLEMENTATION
This "Expand All" and "Collapse All" implementation comprises four general components:
* JQuery/Javascript&colon; One script for "Expand All"; another script for "Collapse All."
* HTML: Snippet containing separate user-clickable "Expand All" and "Collapse All" buttons.
* CSS: Styling for the HTML buttons. In this implementation, the buttons float in the bottom right corner of the browser viewport, and stay in place as the page is scrolled.
* Confluence HTML macro: The entirety of this file must be embedded in a Confluence HTML macro on the given Confluence page. Obviously, for this to work, the Confluence site admin must allow HTML macros on your site.
-->
<!-- CONFIGURATION
There are several general ways for a Confluence site admin or a page author to make these scripts available on a page:
* PAGE TEMPLATE: Create a Confluence page template that contains the HTML macro with the script code. The location of the macro on the page does not matter; for example, you can put it at the end of the page.
* DIRECTLY EMBED: Embed the HTML macro directly on the given page.
* INCLUDE BY REFERENCE: Saving the best for last, put the HTML macro in an EXCERPT macro on a shared page, and then use an EXCERPT INCLUDE macro to embed the HTML macro by reference on other pages; one source location, any number of target pages; this is the best way to go, IMHO. 
-->
<!-- LAST MODIFIED
March 8, 2019
-->

<!-- ======================== -->
<!-- CSS for the button block -->
<style type="text/css">
.div_expand-collapse_all {
text-align:center;
font-size:.8em;
border-radius:.3em;
border-width:thin;
border-style:solid;
border-color:#cce9cd;
background-color:#ddfade;
position:fixed;
bottom:0;
right:0;
padding:.5em;
z-index:200;
}
.div_expand-collapse_all:before {
content:"Expand topics before searching for text!"
}
.buttons_expand-collapse_all {
font-size:.8em;
margin-top:.2em;
}
</style>

<!-- ======================================= -->
<!-- "Expand All" and "Collapse All" buttons -->
<div class="div_expand-collapse_all"><br />
<button class="buttons_expand-collapse_all" name="expandAll" id="expandAll" type="button">Expand All</button>
<button class="buttons_expand-collapse_all" name="collapseAll" id="collapseAll" type="button">Collapse All</button>
</div>

<!-- =================== -->
<!-- "Expand All" script -->
<script type="text/javascript">
AJS.toInit(function() {
AJS.$('#expandAll').click(function() {
AJS.$('.expand-container').each(function() {
if (AJS.$('.expand-content', this).css('display', 'none').css('opacity', '0')) {
AJS.$('.expand-control .expand-control-icon', this).addClass('expanded');
AJS.$('.expand-content', this).removeClass('expand-hidden');
AJS.$('.expand-content', this).css('display', 'block');
AJS.$('.expand-content', this).css('opacity', '1');
}
});
});
});
</script>

<!-- ===================== -->
<!-- "Collapse All" script -->
<script type="text/javascript">
AJS.toInit(function() {
AJS.$('#collapseAll').click(function() {
AJS.$('.expand-container').each(function() {
if (AJS.$('.expand-content', this).css('display', 'block').css('opacity', '1')) {
AJS.$('.expand-control .expand-control-icon', this).removeClass('expanded');
AJS.$('.expand-content', this).addClass('expand-hidden');
AJS.$('.expand-content', this).css('display', 'none');
AJS.$('.expand-content', this).css('opacity', '0');
}
});
});
});
</script>

Hope this helps!

Patrick Chen

Has anyone else had luck getting this working in Confluence Cloud?

Jesse Howard_p9w9w8

The code was wonderful, thanks so much for your help. This fixed my issue with having a bunch of tables on the page that were collapsed (Expand macro).

Ian Mounsey_7k5k6d

For those who want to use a Browser Bookmarlet.

Step-by-step guide to Create an EXPAND / COLLAPSE Bookmarklet

Note: This is a once off step.

Make sure you can see your Chrome Bookmarks Bar. Keyboard shortcut: CONTROL+SHIFT+"B"

Using the keyboard shortcut CONTROL+SHIFT+"O" open the Bookmark Manager
Click on the 3 vertical dots (to the right of the search bar at the top of the page)
Click on "Add new bookmark"
Copy the following javascript and paste it into the URL area:

javascript&colon;(function()%7B%24(".expand-control").each(function()%7B %24(this).trigger("click")%3B%7D)%7D)()
Give it a name: eg "EXPAND"
This bookmarklet will now be in your list of bookmarks. Using the Bookmarks Manager, you can move this Bookmarklet to the top of the page so that it is visible on your browser at all times.

jdeklerk

I appreciate that there are some more elaborate solutions already mentioned, but here are my thoughts:

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

Andre Messa

So when I enter this code the the buttons display in my pages edit mode. However, after I save, the button do not show on my page. Once I go back into edit mode the code has been stripped. Is this behavior something that is taking place because it is a corp wiki?

Екатерина Архипова

Brilliant! It works!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

expand