A User Macro for Making Panels Collapsible

Using panels on a page is a great way to structure your page content to make it look less cluttered and more professional. One great feature of the code block macro that I wish was part of the panel macro is the ability to collapse the content section.

For instance, you may have a page in Confluence that serves as a dashboard of sorts with graphs, Jira macros, and other important metrics that are structured using panels. It would be nice to have a way to maybe collapse some of those panels to save some screen real-estate and prevent having to scroll. Oh well, I guess it can't be done. Tough luck!

Wait! Don't leave. I was just kidding! :) We can easily create a user macro for this to give us that ability. The code for this is below along with some screenshots of how it looks on the page and how to set it up when editing the page. If English is not your native language you can easily change the expand/collapse text by editing lines 18 and 19 to your liking. Enjoy!

How it looks on the page

panel.png

How to set it up on your page

paneledit.png

User Macro Code

Macro Name:
collapsible_panel

Macro Title:
Collapsible Panel

Description:
Any panel macros placed within this macro that have a Panel Title will be collapsible.

Macro Body Processing:
Rendered

Template:

## Developed by: Davin Studer
## Date created: 05/31/2018

## @param ID:title=Panel ID|type=string|required=false|desc=Optionally provide a unique id to surround the panel(s) (no spaces).
## @param Start:title=Start Collapsed|type=boolean|required=false|desc=

########################################################################
## Use the given ID if present otherwise generate one. The reason for ##
## this is so that we can target each user macro distinctly if this   ##
## is included more than once per page.                               ##
########################################################################
#if( $paramID && $paramID != "" )
    #set( $id = $paramID )
#else
    #set( $id = $action.dateFormatter.calendar.timeInMillis )
#end

#set( $expandText = "Expand panel" ) ## Change this to fit your desired verbiage/language
#set( $collapseText = "Collapse panel" )  ## Change this to fit your desired verbiage/language

<script type="text/javascript">
//<![CDATA[
AJS.toInit(function(){
    // These are the CSS styles for this macro. It used to use a style element, but that was causing Confluence
    // to not keep the header bar at the top when you scroll the page. For some reason just putting style elements
    // in a user macro will cause the top bar to not remain static at the top of the page.
    var style = '<style type="text/css">#collapser-$id .panel.collapser-closed .panelContent {display: none;}\n#collapser-$id .panel.collapser-open .panelContent {display: block;}\n.collapser {float: right; cursor: pointer; margin-right: 5px;}\n.collapser-text {vertical-align: top; color: #3b73af;}\n.collapser-text:hover {text-decoration: underline;}</style>';
    AJS.$('#main-content').prepend(style);
    
	/////////////////////////////////////////////////////
    // This block is a mix of Velocity and Javascript. //
    // The Velocty variable will add Javascript to     //
    // open or close the panel(s) within the macro     //
    // depending upon what the user set.               //
    /////////////////////////////////////////////////////
#if ( $paramStart == true )
    AJS.$('#collapser-$id .panel .panelHeader').append('<span class="collapser"><span class="collapser-button expand-control-icon icon">&nbsp;</span><span class="collapser-text">$expandText</span></span>');
    AJS.$('#collapser-$id .panel').has('.panelHeader').addClass('collapser-closed');
#else
    AJS.$('#collapser-$id .panel .panelHeader').append('<span class="collapser"><span class="collapser-button expand-control-icon icon expanded">&nbsp;</span><span class="collapser-text">$collapseText</span></span>');
    AJS.$('#collapser-$id .panel').has('.panelHeader').addClass('collapser-open');
#end

    AJS.$('#collapser-$id .panel .collapser').click(function() {
        var panel = AJS.$(this).parent().parent(); // Get the panel for this specific collapser
        var open = AJS.$(panel).hasClass('collapser-open'); // Is it currently open or closed?

        if(open) {
            toggleCollapser$id(panel, 'close');
        } else {
            toggleCollapser$id(panel, 'open');
        }
    });
});

function toggleCollapser$id(panel, action) {
    if(action === "close") {
        AJS.$(panel).removeClass('collapser-open').addClass('collapser-closed');
        AJS.$('.collapser-button', panel).removeClass('expanded');
        AJS.$('.collapser-text', panel).text('$expandText');
    } else {
        AJS.$(panel).removeClass('collapser-closed').addClass('collapser-open');
        AJS.$('.collapser-button', panel).addClass('expanded');
        AJS.$('.collapser-text', panel).text('$collapseText');
    }
}
//]]>
</script>

<div id="collapser-$id">$body</div>

 

26 comments

Bill Bailey
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.
May 31, 2018

I really appreciate these kind of examples. Even if I don't have need for this function, it shows some advance concepts for writing user macros that one cannot find in the user docs. THX!

Like Davin Studer likes this
Alana Fernando
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.
June 1, 2018

This is awesome @Davin Studer

Like Davin Studer likes this
Davin Studer
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.
June 1, 2018

Thanks @Alana Fernando.

Davin Studer
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.
June 1, 2018
Like # people like this
Deleted user June 19, 2018

I could really use this tool for a dashboard I am creating using panels, but I can't find the "Collapsible Panel" macro on the marketplace! I'm new to Confluence, so maybe there's something I'm missing. Any assistance would be much appreciated @Davin Studer!

Davin Studer
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.
June 19, 2018

This is the code for a user macro. User macros are available in the self host Confluence, but not Confluence Cloud. If you are on the self hosted server or data center version then a Confluence Admin can create the user macro by cutting and pasting in the above code.

Paolo Aquino July 22, 2019

Hi Davin, we tried this and it worked great. Thanks for sharing. However I noticed that some events doesn't get triggered anymore when I put this on our page. Particularly the problem I notice is this:when I have a long page and I scroll all the way down, things still look normal but when I move the page up I don't see the "menu-header" div getting displayed on top anymore.  html code wise it normally adds the "overlay-header" class when I do this. Any suggestions to check why is this so? or possible fixes to the script? we're running confluence version 6.13.3.

Davin Studer
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 23, 2019

It is odd. Turns out just having a <style> element in the user macro causes the header to not be sticky. I've edited the code above to dynamically insert the styles. <sigh>.

Like Paolo Aquino likes this
Paolo Aquino July 26, 2019

Thank you very much!

Like Davin Studer likes this
Fabian Hußl November 14, 2019

Thank you - I love it!

Like Davin Studer likes this
Fabian Hußl November 19, 2019

Hey @Davin Studer , 

we found a small issue when a page properties report is placed inside the panel which is placed inside the Collapsible Panel Macro. In this situation the page properties report is shown as table with borders. 

I found out, that in this situation these classes bring borders to the report: .confluenceTh, .confluenceTd.

Maybe you can check this situation. 

Regards
Fabian

Fabian Hußl November 19, 2019

Hi @Davin Studer , 

I have extended the style tag with the following code: 

CSS

\n.metadata-summary-macro tr th.confluenceTh {border:none;}\n.metadata-summary-macro tr td.confluenceTd {border:none;}

JS

AJS.$('#collapser-$id .panel table.metadata-summary-macro').removeClass('confluenceTable');

Regards
Fabian

Andrew Maclellan December 19, 2019

Hi

 

This is an excellent addition. Thank you.

A small issue though.  If we use headings within the collapsible panel they dont seem to be referenced from the table of contents macro at the top of the page if the panel is collapsed (OK if it is expanded).  This leads to usability problems as clicking on TOC items doesn't result in an action if panels are collapsed

Is there any way to fix this / work around ?  

Usecase is:

Page

Table of Contents

--> Heading 1

------> Heading 1.1

------> Heading 1.2

--> Heading 2

------> Heading 2.1

------> Heading 2.2

 

Panel 1

--> Heading 1

------> Heading 1.1

------> Heading 1.2

Panel 2

--> Heading 2

------> Heading 2.1

------> Heading 2.2

Kathryn Reddie March 9, 2020

Hi @Dav ,

I really like your expandable panel, and would like to be able to tailor it further by selecting a different background colour, and setting the font colour.

Preferably by hex colour.

Given I am a BA with a bit of html/css thrown in, would you be able to give me some advice please?

Is this something that is easy enough to do, or should I forget it?

I've looked at add-ons that are available, but none quite go here.

Have a look at this Dept of Finance in Australia page - this is sort of what I am trying to do, but in Confluence.  

Thanks in advance.

Kathryn
Canberra
Australia

 

Note : this is what I was thinking ... I just have no idea whether a) it's right or b) how to do it.  :)

## @param ID:title=Panel ID|type=string|required=false|desc=Optionally provide a unique id to surround the panel(s) (no spaces).
## @param backgroundcolor:title=Background Colour|type=color|desc=Enter a hexadecimal colour code for the background colour.
## @param fontcolor:title=Font Colour|type=color|desc=Enter a hexadecimal colour code for the font.
## @param Start:title=Start Collapsed|type=boolean|required=false|desc=

Davin Studer
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.
March 17, 2020

The panel macro already has these parameters.

image.png

Kathryn Reddie March 17, 2020

Thanks for responding ... but sorry for not being clear.

How do I make the panel collapsible?

Regards,
Kathryn.

Davin Studer
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.
March 18, 2020

@Kathryn Reddie You need to create the user macro and then put you panel inside the user macro. In order to create the user macro you must be a System Administrator and you must be using Confluence Server or Data Center. The cloud offering does not support user macros.

Like Kathryn Reddie likes this
Gonchik Tsymzhitov
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
January 2, 2021

Kudos for that shared macro!

Steve Arrants March 11, 2021

Wonderful!  I've made my own modifications for our company colors.  I've been trying to figure out where to change the symbol for collapse/expand.  Where would I find that?

Davin Studer
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.
March 11, 2021

That would be this

<span class="collapser-button expand-control-icon icon">&nbsp;</span>

and this 

<span class="collapser-button expand-control-icon icon expanded">&nbsp;</span>
Simha Gontmaher April 25, 2021

Hi,

Did anyone actually managed to chance the default symbol of the macro?

Uday Kiran Bhaviri July 15, 2021

I really didn't change the icon but enhanced the style to make it more visible and stylish like a surrounded curved box with white background.

image.png

Like David Sumlin likes this
Anita Pinto August 8, 2021

Hi,

Can some one help me move the plus sign to the left of the text in panel accordion.  

I am using the css macro in Confluence server.

I tweaked the code as below:

.panel-heading {

background-color: green !Important;

box-shadow: none;

border-radius: 0 !important;

cursor:pointer;

}

 

I also tried adding .collapser-button to panel heading it dd not work. 

We use the digi accordion macro from link below.

https://marketplace.atlassian.com/apps/1219725/digi-formatting?tab=overview&hosting=datacenter

 

I downloaded the CSS file from link below, could not find how to move the + sign to the left of the text.

https://marketplace.atlassian.com/download/apps/1219725/version/1200000

 

Any assistance would be really appreciated.

Regards

Anitdigi accordion.png

Kmmaughs
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.
March 31, 2022

Do you have an opinion on the best way to implement a collapse all option for this custom collapsible panel user macro set? 

We previously implemented something for the OOTB Confluence expand macro by adding in a HTML block with the following snippet:

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

I'm looking to add some similar functionality for this collapsible panel user macro. 

Davin Studer
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.
March 31, 2022

This JavaScript should work.

AJS.$('.panel .collapser').each(function(){
var panel = AJS.$(this).parent().parent();

AJS.$(panel).removeClass('collapser-open').addClass('collapser-closed');
AJS.$('.collapser-button', panel).removeClass('expanded');
AJS.$('.collapser-text', panel).text('Expand panel');
});

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events