How do i auto-expand a tree structure on the left hand nav

I want to set the page tree on the left hand nav within a space to be automatically expanded so my users dont have to click to expand each page to see the child pages. Is this possible? Thanks

7 answers

1 accepted

This widget could not be displayed.

Hi Brett,

Are you currently using any customized Themes? If you are using Doc Theme, then maybe you could try this:

  1. Go to Space admin -> Themes
  2. Go into Documentation Theme configuration
  3. Un-select Page Tree
  4. Add something similar to the following to navigation
    1
    {pagetree:startDepth=3|searchBox=true}
Paul Greig Atlassian Team Aug 27, 2014

Here are some additional parameters also available to the pagetree macro: https://confluence.atlassian.com/display/DOC/Page+Tree+Macro

This widget could not be displayed.

There's a similar request posted here: https://answers.atlassian.com/questions/21300/how-to-expand-page-tree-in-confluence-4-0-documentation-theme

Try out the suggested resolution and hope it works for you!

This widget could not be displayed.
Davin Studer Community Champion Sep 02, 2013

Both of the above answers will only get you part of the way there. These will either expand the whole tree up to a certain level all of the time(which can get super heavy), or if you add in the paramter root=@self then you could see all of the child pages of the current page you are on if you did something like this.

{pagetree:root=@self|startDepth=1}

However, the page tree would change every time based on how far in you go into the tree. I don't think this is very intuative. Really there is no built in way to show the whole tree and expand only up to your current page and its children. You can work around it with some javascript, but as of the current version of the pagetree macro the below workaround has been broken. If you go back to the previous version of the pagetree macro it still works. I've been thinking about diving in and making the javascript workaround work with the current version but I just haven't had the time to research it. Here is s link to the workaround if you are willing to be on version 2.1.5.

http://www.communardo.de/home/techblog/2011/05/02/improve-the-confluence-pagetree-macro-functionality

The code to get it to work from the above link is below. You would need to stick this in the "At end of the HEAD" section of the Custom HTML page (Confluence Admin->Look and Feel->Custom HTML).

<script type="text/javascript" >
AJS.toInit(function ($) {
/////////////////////////////////////////////////////////////
// improve the pagetree functionality: "selected" class at //
// selected page and expand the children of selected page //
// first save the original pagetree function //
// "origHideEmptyChildrenContainer" //
/////////////////////////////////////////////////////////////
var origHideEmptyChildrenContainer = AJS.pagetree.hideEmptyChildrenContainers;

/////////////////////////////////////////////////////////////
// define our own one and overwrite the original pagetree //
// function "hideEmptyChildrenContainers" this function is //
// called by the pagetree after children finish loading //
/////////////////////////////////////////////////////////////
AJS.pagetree.hideEmptyChildrenContainers = function(pagetreeChildrenDiv) {
/////////////////////////////////////////////////////////////
//search for the child element with the style attribute //
/////////////////////////////////////////////////////////////
pagetreeChildrenDiv.find('span.plugin_pagetree_children_span').each(function(){
if(AJS.$(this).attr('style')) {

/////////////////////////////////////////////////////////////
// add a marker for the seleted page... now we can style //
// it with css //
/////////////////////////////////////////////////////////////
AJS.$(this).addClass("selected");

/////////////////////////////////////////////////////////////
// click on the plus icon to expand the children of the //
// current page //
/////////////////////////////////////////////////////////////
AJS.$(this).parent().parent().find('.plugin_pagetree_childtoggle_container a.plugin_pagetree_childtoggle').click();
}
});

/////////////////////////////////////////////////////////////
// call the saved original function... //
/////////////////////////////////////////////////////////////
origHideEmptyChildrenContainer(pagetreeChildrenDiv);
};
});
</script>

This widget could not be displayed.

This works for Default Theme in 5.2.3 to automatically expand child pages:

<script type="text/javascript" >
AJS.toInit(function ($) {
AJS.$('a.more-children-link').click();
});
</script>

where do you add this JS script ?

This widget could not be displayed.

Any ideas how to accomplish that with the documentation theme?

Hi Maria,

maybe our add-on Scroll Versions does help you with that. Besides version- and variant-management, Scroll Versions comes with an enhanced pagetree that remembers which nodes were open also after page reload.

If you have further questions, or you want to do a online demo, please let us know by contacting sales@k15t.com.

Cheers,
Nils

This widget could not be displayed.

While I used this javascript in Confluence 4.3, it is not working in 5.4

This widget could not be displayed.

it appears to be a timing issue.in documentation theme of confluence 5.4, the execution of the function needs to be delayed a bit until the pagetree macro output is loaded.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

471 views 6 6
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