How can I easily expand/collapse lists or headings in Cloud?

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?

3 answers

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

 

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!

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

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

ah - I think you mean an expanding drill down list with multiple levels

e.g. at first view it looks like

  1. aaaa
  2. bbbb
  3. cccc

but clicking on 2 shows further options

  1. aaaa
  2. bbbb
    1. xxxxx
    2. yyyy
  3. cccc

then clicking on xxxx you get

  1. aaaa
  2. bbbb
    1. xxxxx
      1. qqqqq
    2. yyyy
  3. cccc

That is "easy" too - just nest the expand macros i.e. within the expand macro for "2. aaa" include another set of expand macros as "xxxx click here" and "yyyy click here", then within the box for xxxx include another expand as "qqqqq click here"

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.

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.

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!

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

Hi Tim, this is a great prototype! It's quite similar to what I was imagining. Cool to see it in action.

My initial constructive feedback (and you may already have considered this) is that I don't think we would want to have the entire item formatted like a link (color and underline). If the item were a paragraph of text, this would start to affect readability significantly.

In production, more ideal would be a clickable icon to expand/collapse, like the carrot bullet that is shown in your prototype.

I think we'd at least want to have an option in the macro settings as to whether the list is expanded or collapsed by default.

The ability to expand or collapse a certain level of the hierarchy without clicking every row separately could be useful, but I think this is a lower priority and wouldn't be required for the MVP. It's also a greater UI challenge to implement, I'm sure.

I look forward to seeing what you launch! Keep me posted.

Hi Chris, 

Based on your feedback we’ve just released the list expand macro in the Macro Toolbox for Cloud add-on.

It works just like the prototype above but with some of the changes you suggested:

  • text is formatted normally rather than like a link
  • choose if the list should be expanded or collapsed by default

Give it a try, I'm keen to hear what you think!

Tim, that's some agile progress! Thanks for considering the feedback. I'll have the team check it out.

I think the GIF (or video) is a nice way to show how the feature works. Let me know if you have a new one reflecting the production version.

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.

 

Best

Eliot

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 24, 2018 in Confluence

Atlassian Research opportunity with Confluence templates

Do you use templates with Confluence? Take part in a remote 1-hr workshop. You'll receive USD $100 for your time!   We're looking for people to participate in a   remote 1-hr workshop...

1,022 views 14 12
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you