Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

How to create an "Expand All" button for Confluence

Hi

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

9 answers

1 accepted

4 votes
Answer accepted

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

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

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

this links directs to the confluence documentation

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!

Like amit.pandey likes this

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>
<script type="text/javascript">
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 

 

 

 

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

Like Zachariah Carmichael likes this

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

This was great.  Worked perfectly.

No need for jQuery, you can do this in plain ES6 these days:

[].forEach.call(document.querySelectorAll('.expand-control'), x => x.click())

Here is an improvement (in the case that some {Expand} macros are in opposing states, e.g. some collapsed, some expanded) -

 

<a id="toggleAll" href="#">Expand/Collapse All</a>
<script type="text/javascript">
AJS.toInit(function ()
{
AJS.$('#toggleAll').click(function()
{
var expanded = jQuery(".expand-control-icon.expanded").closest("div");
var unexpanded = jQuery(".expand-control-icon:not(.expanded)").closest("div");
if (expanded.size() > unexpanded.size()) {
    expanded.each(function(){ jQuery(this).trigger("click");})
} else {
    unexpanded.each(function(){ jQuery(this).trigger("click");})
}
});
});
</script>

 

Simply place in an HTML code block or follow @amna's reply to create a user macro.

Like # people like this

Thanks, that's what I was looking for.

Here is a further improvement: The button (idea of @Scott Fordin) is shown as pressed, when all sections are expanded using the AUI-Button state "aria-pressed"

<p align="center"><button name="toggleAll" id="toggleAll" type="button" class="aui-button" aria-pressed="false">Expand/Collapse All</button></p>

<script type="text/javascript">
AJS.toInit(function ()
{
AJS.$('#toggleAll').click(function()
{
var expanded = jQuery(".expand-control-icon.expanded").closest("div");
var unexpanded = jQuery(".expand-control-icon:not(.expanded)").closest("div");

if (expanded.size() > unexpanded.size()) {
expanded.each(function(){

jQuery(this).trigger("click");

jQuery ("#toggleAll").attr("aria-pressed", jQuery (this).attr("aria-pressed") == 'false' ? "true" : "false" );

})

} else {

unexpanded.each(function(){

jQuery(this).trigger("click");

jQuery ("#toggleAll").attr("aria-pressed", jQuery (this).attr("aria-pressed") == 'true' ? "false" : "true" );

})
}
});
});

</script>

 

Like # people like this

Hey, that works slick. Thank you! This is something that really bugs my most engaged users, not being able to find something in non-expanded text on a page. Especially when search results said it's there!

Like efavreau likes this

Hello Everyone, 

I found that the expand all macro posted from Ben Coughlan below works perfectly, except for the fact that it does not take into account of the current state of the list (expaned vs unexpanded) when toggling. The HTML listed above does take into account whether the list is in opposing states, however, I have not been able to get this to work as Michelle Rau states above. It creates the button just fine, but nothings happens when I click on it.

Has anyone else gotten this to work for expanding all lists regardless of the states they are in? My problem is that if any of the expanded lists are already expanded and I hit "Expand all", they become unexpanded while the rest become expanded. If anybody has gotten the above code from Volker or Zachariah to work, could you please explain how? 

Hi Scott,

if you get the macro posted from Ben Coughlan (which is the same as amnas) to work, I can't figure out why there seems to be a problem with the above code. And if you get it to work, you know how to use the html macro. The code I have posted works in Con 5.10.8 and still does in Con 6.13 within a html macro or within a user macro. It only works for the expand macro.

The user macro should work as follows: If there are more collapsed expand macros, all macros should expand. If there are more expanded expand macros, all macros should collapse. The button is light, if collapsed, and dark, if expanded.

How is the structure of page? Do you put divs around the expandable content? This could cause problems.

I am not a javascript and jquery expert, but in some cases it could be, that the jquery runs twice. Then you could add this

AJS.$("#toggleAll").unbind('click');

before

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

I hope I was able to help you.

Volker

Hi Scott,

instead of these lines:

var expanded = jQuery(".expand-control-icon.expanded").closest("div");
var unexpanded = jQuery(".expand-control-icon:not(.expanded)").closest("div");

use these:

var expanded = jQuery(".expand-icon.aui-iconfont-chevron-down").closest("div");
var unexpanded = jQuery(".expand-icon.aui-iconfont-chevron-right").closest("div");

 

Hope it will help you.

Raduz

Like Patrick Klinner likes this

The original version works great.  I have an very extensive cascade of expands (sometimes about 6 levels deep). (Note: It takes awhile for the page to refresh once I push the Expand/Collapse button, but it is a minimal wait). I created an 'Index' section that uses the 'anchor' feature, allowing users to jump to commonly referenced sections of the document.  And since the anchors will not work unless all of the expands are expanded.  So I GREATLY appreciate this script's ability.  Thanks.

I used an HTML Macro with this text (credit to those in this thread whose solutions are implemented in this layout.

 

<p align="left"><button name="toggleAll" id="toggleAll" type="button" class="aui-button" aria-pressed="false">Expand/Collapse All</button></p> <script type="text/javascript"> AJS.toInit(function () { AJS.$('#toggleAll').click(function() { var expanded = jQuery(".expand-control-icon.expanded").closest("div"); var unexpanded = jQuery(".expand-control-icon:not(.expanded)").closest("div"); if (expanded.size() > unexpanded.size()) { expanded.each(function(){ jQuery(this).trigger("click"); jQuery ("#toggleAll").attr("aria-pressed", jQuery (this).attr("aria-pressed") == 'false' ? "true" : "false" ); }) } else { unexpanded.each(function(){ jQuery(this).trigger("click"); jQuery ("#toggleAll").attr("aria-pressed", jQuery (this).attr("aria-pressed") == 'true' ? "false" : "true" ); }) } }); }); </script>

Hi @Casey Maynard 

thanks for this input. Sound great.

As I just learned, HTML marcos seem to be onpremise-only. We are using Confluence cloud. Is there any chance to use this approach similarly w/o user defined macros?

 

Thanks a lot

Thomas

We also use a server side system, so I am not able to help without the use of user macros.  Maybe there is an 'add-on' that is available to do this? Although... of course ... it will cost $$.  Apologies for no useful answers.  Thanks.

Ian Lim I'm New Here Oct 27, 2020

Hello everyone, 

The suggestions above look very promising. However, I am not able to find a way how to enter those codes in an article. Can you give me the step-by-step procedure of where to start? Like how to insert and apply HTML or JavaScript codes? I'm new to Confluence Cloud and using version 1000.0.0-4fb864544fc8.

Thank you!

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>

Works like a charm!

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?

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

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

Well this one 'works' to expand.  But I wanted to be able to 'toggle' them expanded and then collapse them.

Additionally if you have any tables in your expands they do not get displayed correctly.

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:

Threw my feet up. Yay!

Thanks a lot.

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.

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!

Ack. Welcome to the neighborhood... I just realized there's a minor typo ("type:" instead of "type=") in the sample I posted yesterday. The sample still works, despite the typo, but it's annoying to an OCD type like myself. Here's an updated sample that uses the "=" sign consistently:

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

Thanks for listening.

Hi, wondering how to do this for a single, specific, expand macro?  Basically i'm just looking to "replace" the clickable text "Click here to expand..." with a button to do the same?  I'm fairly new to JavaScript and jQuery but i was thinking:  instead of the ".each" in the jQuery and replace it with something static, like macro-id....but no luck.

Any thoughts? 

Hi,

all the functions described on this page are (only) toggling the current status of the expand macros on an confluence page. If I have 5 expand macros on page and the first two are expanded and the last three are closed, the button will close the first two and open the last three.

Is there a way to really expand/close all regardless of their status?

Thanks,

Volker

You guys are awesome for providing this feature & button---thank you!!!

Interesting -- I tried this out and it worked very well except that an expand macro inside an expand macro did not expand.

However, when I exported the page as a PDF, all the expanded macros printed as expanded in the PDF.

Thanks for this!

I'm still using and liking this macro, however it seems to have a conflict with "export page as PDF." Any ideas why that might be?

System error

Cause

com.atlassian.confluence.importexport.ImportExportException: Exception while rendering the PDF document /opt/webhost/wiki/confluence-home/temp/pdfexport-20190529-290519-2100-214/Sirius-Home-290519-2100-215.pdf
    at com.atlassian.confluence.extra.flyingpdf.FlyingSaucerXmlToPdfConverter.convertXhtmlToPdf(FlyingSaucerXmlToPdfConverter.java:87)

caused by: java.lang.NullPointerException
    at Unknown location

Scott Fordin

How can I make the button larger and change the color ?

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:

  1. 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.
       
  2. 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.

  3. 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!

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

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

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?

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!

Thanks KatieC! That works perfect! :)

which code I tried this in both  codes on here and the UI is not eorking for me ? 

this link brings me back to this page

search for my user name in this thread.  the solution there seems to work.

<p align="left"><button name="toggleAll" id="toggleAll" type="button" class="aui-button" aria-pressed="false">Expand/Collapse All</button></p> <script type="text/javascript"> AJS.toInit(function () { AJS.$('#toggleAll').click(function() { //var expanded = jQuery(".expand-icon.aui-iconfont-chevron-down").closest("div"); //var unexpanded = jQuery(".expand-icon.aui-iconfont-chevron-right").closest("div"); var expanded = jQuery(".rw_open.rwui_expand"); var unexpanded = jQuery(":not(.rw_open).rwui_expand"); if (expanded.size() > unexpanded.size()) { expanded.each(function(){ jQuery(this).trigger("click"); jQuery ("#toggleAll").attr("aria-pressed", jQuery (this).attr("aria-pressed") == 'false' ? "true" : "false" ); }) } else { unexpanded.each(function(){ jQuery(this).trigger("click"); jQuery ("#toggleAll").attr("aria-pressed", jQuery (this).attr("aria-pressed") == 'true' ? "false" : "true" ); }) } }); }); </script>

 

 

So the code I just posted was from a lot of comments in this chat (thank you to all that helped). The expand/collapse button opens and close the expand marco even when one is open and teh other is closed.  I commented those two lines out and placed new one that open in close the UI expand marco. the only issue is that if one is open and the other is close it flip flops instead of  opening all and then closing all.   

 

Now I dug deep and I found that when your opening and closing the the UI expand the div outside of the element, when open, div class  is rwui_expandable_item rw_open. When it is close it is rwui_expandable_item. If anyone can help that would be great. I have been killing my self over this hahahaha

Like Casey Maynard likes this

I want to trigger the expand all when Ctrl F is pressed, but I can't get the code to work. What am I doing wrong? Here's what I used in an HTML macro at the bottom of the page:

<script type="text/javascript">
window.addEventListener("keydown", function(e) {
  if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
AJS.toInit(function() {
 $(".expand-control").trigger('keydown');
});
}
})
</script>
Like Thomas Kramer likes this

@Kim Rattray that sounds like a great idea. Unfortunately I can't help, but I would be really interested in the solution if someone knows how to solve!

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?

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).

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?

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

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

402 views 23 8
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you