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 prevent expandables from expanding in Edit mode?

Rob Bl

When editing, I want expandables to stay collapsed until I toggle them. I have pages with dozens of expandables. It's incredibly helpful for finding the sections you need when reading these pages. It's a nightmare for editing because as soon as you click EDIT, every single one expands.

This is such an obvious problem, I'm hoping I'm missing a setting somewhere, and this is not just more bad UX design.

Accepted answers

Rob Bl

@Michal Kocztorz (msales)'s reply led me to a workaround that I'm posting at the top level here in order to mark it with [Accept Answer] so others can more easily find it and use it:

You can make your own bookmarklet that closes all the expandables. If you're unfamiliar with bookmarklets, they're little bits of javascript, added as bookmarks in your browser (hence the name), that when clicked allow you to fiddle with the page you're viewing. For example, I have a bookmarklet that makes it possible to edit the content on the page.

Anyway...here's how to make all the expanded sections collapse in the Edit view of a Confluence page:

In your browser, go to Bookmarks > Add New Bookmark
Copy the javascript below, and past it into the URL for your new bookmark
Replace &colon; with an actual colon
Name your bookmark and save

Now whenever you want to collapse all those expanded sections, just click that bookmark, and KABOOM — you're good to go.

javascript&colon;document.querySelectorAll('.ak-editor-expand__icon-container').forEach(e=>e.click())

CAVEAT: Only tested in (Chromium-based) Brave Browser, but should work everywhere since it's the page you're affecting, not the software.

All comments

Linh Pham_Ricksoft_Inc

Hi @Rob Bl

You should be able to collapse the Expand macro in Edit mode. The limitation is that you'll need to do so manually one by one, and the state does not persist after closing and re-opening the editor.

Rob Bl

Exactly the problem I'm trying to prevent.

Some pages have dozens of expandables. I'd prefer to not have to close them all over and over and over again.

So the upshot here is that my option B is the answer: This is just bad UI/UX on the part of Atlassian — which, unfortunately, comes as no surprise whatsoever.

Michal Kocztorz (msales)

Well, I'm sure that shortly Atlassian tem will provide appropriate feature. We just need to wait a bit, 5-10 years usually works.

Meanwhile you can use this in bookmark in browser:

javascript&colon;(()=>{document.querySelectorAll('.ak-editor-expand__icon-container').forEach(e=>e.click());})();

It's not smart, but it kind of works. In edit mode it will toggle all exapndables.

It works for me, but not sure if its something that will work for everyone. I don't know confluence so much.

Rob Bl

Love me a good bookmarklet! But this isn't working for me. I don't know JS well enough to fix it, but I think the forum formatting ate some if it. If nothing else,I know &colon; was meant to be just a colon. Did the form formatting eat anything else? I'd be quite happy with this workaround if I can get it to behave!

Rob Bl

UPDATE: Did some screwing around with that script, using as a guide another JS bookmarklet that makes webpages editable in the browser, and got it working! Here's what I came up with. Just replace &colon; with an actual colon.

javascript&colon;document.querySelectorAll('.ak-editor-expand__icon-container').forEach(e=>e.click())

Thanks @Michal Kocztorz (msales) ! This is going to be fantastic!

Michal Kocztorz (msales)

I did not notice it got changed. Thank for clarifying!

Rob Bl

@Michal Kocztorz (msales)'s reply led me to a workaround that I'm posting at the top level here in order to mark it with [Accept Answer] so others can more easily find it and use it:

Anyway...here's how to make all the expanded sections collapse in the Edit view of a Confluence page:

In your browser, go to Bookmarks > Add New Bookmark
Copy the javascript below, and past it into the URL for your new bookmark
Replace &colon; with an actual colon
Name your bookmark and save

Now whenever you want to collapse all those expanded sections, just click that bookmark, and KABOOM — you're good to go.

javascript&colon;document.querySelectorAll('.ak-editor-expand__icon-container').forEach(e=>e.click())

CAVEAT: Only tested in (Chromium-based) Brave Browser, but should work everywhere since it's the page you're affecting, not the software.

Rob Bl

2nd CAVEAT: I've found that sometimes on pages where you've used the bookmarklet, it can prevent selecting/editing text inside an expandable — BUT if you click the bookmarklet again it refreshes, and your fine.

Ravi Mani_rmu8rf

This might not be the most efficient way to do this, but what I did, was collapse all the expands in my confluence page, and then save that new-view page to your bookmarks.

1. Open the page with all your Expands in [EDIT] mode.

2. Close the Expands with the arrow in the Top Left corner of each expand

3. Create a bookmark for the page , this will allow you to reload the page in edit mode, where the expands are all in a collapsed state until you need to edit one of the expands.

Hope this helps some folks.

Rob Bl

That's a simpler solution than the bookmarklet if you're always editing the same pages. I have dozens, and am always making more, so this would get pretty unwieldy for me.

Alex Kromker

Hi, I created two js commands I could use in the console to handle this for me.
Hope this helps someone

This one works in edit mode:

document.querySelectorAll('button.ak-editor-expand__icon-container[aria-expanded="true"]').forEach(e=>e.click());

This one works in normal mode:

document.querySelectorAll('[aria-label="Collapse content"]').forEach(e=>e.click())

For anyone not familiar, you can inspect the page, navigate to the console tab, paste one of these 2 lines and press enter.

Rob Bl

Good workaround for those comfortable with the console tab. Although I think the bookmarklet is faster and simpler in most cases. Thanks!

Rob Bl

Unbelievable! Atlassian has refused to fix this obvious UI oversight that would take probably 20 minutes of coding to resolve.

I mean, "unbelievable" probably isn't the right word, as I really shouldn't be surprised.It's been clear for years that Atlassian has either zero interest in (or zero understanding of) improving the UX on their products.

Hannah Rayer

@Alex Kromker do you have a similar hack for making it so I can export to PDF a page with the Expand macros *not* expanded?

Hannah Rayer

@Rob Bl do you have a similar hack for making it so I can export to PDF a page with the Expand macros *not* expanded?

Rob Bl

@Hannah Rayer you can Print > PDF instead of Export > PDF

If have Firefox or a Chromium-based browser (Chrome, Brave, Vivaldi, Edge, etc), in the browser, just Print > Destination > Save as PDF
If you're on a Mac, in Safari, you can Print, then click the PDF bottom at the bottom of the print dialog

mike_38fgmh

This answer is a top search result for this question.

Just wanted to add that this feature is only in Cloud, not Server.

Here's the Server issue where they say they're not going to do it.

[CONFSERVER-51676] Ability to collapse Expand macro when editing

Welcome!

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

Quick Links

Find more posts tagged with

confluence

cloud

confluence-cloud