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.

[Rob Bl · Accepted solution]

@Michal Kocztorz'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:

1. In your browser, go to Bookmarks > Add New Bookmark
2. Copy the javascript below, and past it into the URL for your new bookmark
3. Replace : with an actual colon
4. 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: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.

[Michal Kocztorz]

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:(()=>{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 : 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 : with an actual colon.

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

Thanks @Michal Kocztorz ! This is going to be fantastic!

[Michal Kocztorz]

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

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