expand/collapse section

Roland Gruber
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
January 18, 2019

Hello,

i use sections on my pages that expand and collapse.
To open/close all sections at once I use the following macro:

## @noparams
<button name="toggleAll" id="toggleAll" type="button">expand/collapse</button>

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


Now I want 2 single buttons where one opens and one closes the sections. Can someone please help me get this done?

Thank you!

1 answer

1 vote
repi
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 29, 2019

I use this macro to expand and collapse.
However, there is only one button. Expand first actuation, again collapsing.

 

## Macro title: Expand All
## Macro has a body: N
## Developed by: Tim Seim
## Date created: 2016-03-11
## Installed by: repi
## @param Titel:title=Titel|type=string|required=true|default=Alles erweitern/kollabieren|desc=Angezeigter Text
<a id="toggleAll" href="#" class="aui-button aui-button-subtle">$paramTitel</a>
<script type="text/javascript">
AJS.toInit(function (){
var expandiert = false;
AJS.$('#toggleAll').click(function(){
if (expandiert) {
var content = jQuery('.expand-content')
.addClass('expand-hidden')
.css({'display': 'none', 'opacity': 0});
content.prev('.expand-control').find('.expand-control-icon').removeClass('expanded');

} else {
var content = jQuery('.expand-content.expand-hidden')
.removeClass('expand-hidden')
.css({'display': 'block', 'opacity': 1});
content.prev('.expand-control').find('.expand-control-icon').addClass('expanded');
}
expandiert = !expandiert;
});
});
</script>
Majo Francis December 3, 2023

is it possible to do this in confluence cloud ?

Like Glenn Wark likes this
Glenn Wark May 28, 2024

I have dozens of expand sections in a cloud page, and every time I go to edit it, it expands them all!  I just need the one I'm editing open and would like to close the rest.  It's very tedious to close them all each time update and edit.  And I tried make a jQuery one-liner I could run in the console, but it would take to long to figure out which attribute it is.  It looks like the css and Dom hierarchy was much simpler in the stand-alone version. 

Glenn Wark June 12, 2024

I decided to dig a bit more and now run this in the console to collapse everything in the Edge javascript console:

var $collapse = $(".ak-editor-expand.ak-editor-expand__type-nestedExpand")
$collapse.removeClass("ak-editor-expand__expanded")

 

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events