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.
@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:
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.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Good workaround for those comfortable with the console tab. Although I think the bookmarklet is faster and simpler in most cases. Thanks!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I did not notice it got changed. Thank for clarifying!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.