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 can I easily expand/collapse lists or headings in Cloud?

Chris Zach

I'd like an easy way to expand or collapse content in lists and by headings. Use cases include:

Showing a high level summary of information to one audience without divorcing the summary from the details.
More easily reviewing an outline of information while focusing on the key points.
More easily navigating a page with an abundance of text.

For collapsing by headings, the Expando add-on exists, but it's not supported or available for Cloud.

For lists, the built-in Expand Macro does not work with the built-in lists.

Lists would either be collapsible by default or could be wrapped in a new macro that enables this functionality. The user should be able to expand a single item or all items at that level in the outline.

For an example of potential implementation of collapsible lists or outlines, see OneNote.

Is there a way to do this today?

Accepted answers

Rodney Hughes

Why not use the standard Macro "Expand" - put the page into edit mode >Insert>Macro

That provides a link line that allows the user to click to see the full text

I use this in FAQ tables ... first column is the question, second column includes the expand macro with the detailed answer. That means the table appears as a single line of text per question until they click the expand link.

I further format the question column as a heading style so that I can have a Table of Contents at the top of the page - hence the User can sort the table of questions alphabetically by clicking on the table header but can still see the original list of questions in the TOC and can jump straight to it

image2016-5-19 6:56:14.png

smile

image2016-5-19 6:56:14.png

All comments

Rodney Hughes

Why not use the standard Macro "Expand" - put the page into edit mode >Insert>Macro

That provides a link line that allows the user to click to see the full text

image2016-5-19 6:56:14.png

smile

image2016-5-19 6:56:14.png

Tim_rybt3w

Hi Chris,

We’ve created a Heading Expand/Collapse macro as part of our toolbox of useful Confluence Cloud macros. It lets you show and hide content under any heading style and also if it should be expanded or collapsed by default.

Try it here: https://marketplace.atlassian.com/1215202

Keen to know if it helps you out, feedback is always welcome smile

Tim

Edit: We've also added an expand and collapse macro for bullet and numbered lists.

Chris Zach

I think this is a great use case for the Expand Macro, as well as for combining headings and Table of Contents Macro with tables.

However, it doesn't help with collapsible lists, which is the core of my use case and question.

Thanks!

Chris Zach

Thanks, Tim. I didn't know that your add-on existed. I'll check it out.

On the surface, it looks useful for collapsing headings. However, it's a bit expensive for that single feature for our company.

Rodney Hughes

Perhaps I don't understand what you mean by a "collapsible list"

My example seems to keep the amount of text on the page at first view to a minimum (i.e. :"clean").

the "list" can be sorted

the list can have heading styles

and it is no cost using standard functionality smile

Tim_rybt3w

Thanks for the honest feedback smile . I can understand the issue with the pricing if you're looking just for that single feature alone.

We plan to continue expanding the number of macros included keeping it at the same price point. I'll take a look at your expandable lists request to see what's feasible considering Cloud's restrictions.

I recommend checking out the included HTML macro that lets you securely embed any HTML and JS into the page – others have found that valuable too.

Thanks again Chris!

Chris Zach

Those are good points!

I guess the key difference is being able to do this with standard bulleted and numbered lists.

Looks like this:

https://www.microsoftpressstore.com/articles/article.aspx?p=2224065&seqNum=4

Tim_rybt3w

Hi Chris, I've created a prototype List Expand macro for you that's similar to OneNote. Keen to hear what you think!

http://bit.ly/1TLnUft

Eliot Cole

Hi, Chris

Did you get anywhere with this?

I'm wondering, is there perhaps a way to do this with a minimal CSS fiddle?

I know that CSS is technically the devil with regards to passing the pages on to people that might not be technically literate, but if it's only a line to apply the H1, H2, H3, etc, style to the ".expand-control-text" class, I'm hoping that it's relatively simple.