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

Brett Thomson March 18, 2013

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

9 votes
Answer accepted
Joachim Ooi
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
May 19, 2013

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
Atlassian Team members are employees working across the company in a wide variety of roles.
August 27, 2014

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

0 votes
Hans-Peter Geier March 12, 2014

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.

0 votes
Hans-Peter Geier March 10, 2014

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

0 votes
Maria Kougioumoutzi November 6, 2013

Any ideas how to accomplish that with the documentation theme?

Nils Bier _K15t_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 17, 2013

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

0 votes
Alban Hoop October 6, 2013

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 November 24, 2013

where do you add this JS script ?

0 votes
Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 2, 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>

0 votes
hsuhailah
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 2, 2013

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!

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events