A User Macro for Making Panels Collapsible

[#1]

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

How to set it up on your page

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>

[Bill Bailey]

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!

[Alana Fernando]

This is awesome @Davin Studer

[Davin Studer]

Thanks @Alana Fernando.

[Davin Studer]

@Bill Bailey

[Deleted user]

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]

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]

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]

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

[Paolo Aquino]

Thank you very much!

[Fabian Hußl]

Thank you - I love it!

[Fabian Hußl]

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]

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]

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]

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]

The panel macro already has these parameters.

[Kathryn Reddie]

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

How do I make the panel collapsible?

Regards,
Kathryn.

[Davin Studer]

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

[Gonchik Tsymzhitov]

Kudos for that shared macro!

[Steve Arrants]

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]

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]

Hi,

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

[Uday Kiran Bhaviri]

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.

[Anita Pinto]

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

Anit

[Kmmaughs]

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]

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');
});