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

[Brett Thomson]

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

[Joachim Ooi · Accepted solution]

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]

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

[Hans-Peter Geier]

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.

[Hans-Peter Geier]

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

[Maria Kougioumoutzi]

Any ideas how to accomplish that with the documentation theme?

[Nils Bier _K15t_]

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

[Alban Hoop]

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>

[Anil Samuel]

where do you add this JS script ?

[Davin Studer]

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>

[hsuhailah]

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!