• 3
    • 0
    • We collect Confluence feedback from various sources, and we evaluate what we've collected when planning our product roadmap. To understand how this piece of feedback will be reviewed, see our Implementation of New Features Policy.

      NOTE: This suggestion is for Confluence Server. Using Confluence Cloud? See the corresponding suggestion.

      Background of Request

      The current behavior of Confluence is to hide both child pages list in the lower part of the page and child page tree in the side navigation bar of "Documentation Theme".

      This behavior require user to click at least once to see the list of child pages of the parent page accessed and due to the design of the new drop down button it is hard to differentiate pages that have children and the one that doesn't have child pages. Since opening up the whole child page list in the lower part of the page could be aesthetically unpleasing if the number of child pages is huge, we should provide the option for this at side bar navigation.

      Proposed Solution

      Since "Documentation Theme" provide side navigation bar to, it would be great if administrator or users of Confluence has the ability to configure it to open the child page tree automatically when the parent page accessed.

      Hence user will be able to use side navigation bar to see the list of child pages without clicking it.

      For administrator, this configuration should be provided at theme configuration. For users, this configuration should be provided at user profile preferences option.

      Another method is to improve the button icon to be a bigger and higher contrast so user would at least able to differentiate it easily.

            [CONFSERVER-29482] Expand Child Pages Tree Automatically When Opening Parent Page

            Ben Leggo added a comment - - edited

            @namics.com - Is it possible to modify this to NOT expand one specific child item ?

            Ben Leggo added a comment - - edited @namics.com - Is it possible to modify this to NOT expand one specific child item ?

            we are using confluence 5.9.4 and the global look & feel theme provides this feature

            Dmitry Ree added a comment - we are using confluence 5.9.4 and the global look & feel theme provides this feature

            The above script gets rid of the bullet in front of pages with no children. However, when selecting a page with children, the children still don't automatically expand in the tree. Any idea why?

            Noel Estabrook added a comment - The above script gets rid of the bullet in front of pages with no children. However, when selecting a page with children, the children still don't automatically expand in the tree. Any idea why?

            @Matt Fysh
            Thanks for this Code.
            We modified it slightly for our needs

            • only childs of the selected parent page expand
            • removed google font
              {html}
              <style>
              	h1, h2, h3, #title-heading { font-family: sans-serif !important; }
              	#children-section { display: none; }
              	.plugin_pagetree { padding-top: 14px; }
              	.plugin_pagetree_childtoggle_container > .no-children.icon { visibility: hidden; }
              </style>
              <script>
              	(function() {
              		// improve the page tree macro to prevent asynchronous loads of children when navigating the tree structure
              		var init = false;
              		AJS.bind('pagetree-children-loaded', function() {
              			if (init) { return; }
              			init = true;
              		$('.plugin_pagetree_current').parent().next().andSelf().prevAll('.plugin_pagetree_childtoggle_container').children('.plugin_pagetree_childtoggle').click();
              			$('.plugin_pagetree_children_container').stop(true, true);
              
              			// disable the slide up/down animations
              			$('.plugin_pagetree_childtoggle').on('click', function() {
              				$('.plugin_pagetree_children_container').stop(true, true);
              			});
              		});
              	}())
              </script>
              {html}
              

            Merkle Germany GmbH added a comment - @Matt Fysh Thanks for this Code. We modified it slightly for our needs only childs of the selected parent page expand removed google font {html} <style> h1, h2, h3, #title-heading { font-family: sans-serif !important; } #children-section { display: none; } .plugin_pagetree { padding-top: 14px; } .plugin_pagetree_childtoggle_container > .no-children.icon { visibility: hidden; } </style> <script> (function() { // improve the page tree macro to prevent asynchronous loads of children when navigating the tree structure var init = false ; AJS.bind( 'pagetree-children-loaded' , function() { if (init) { return ; } init = true ; $( '.plugin_pagetree_current' ).parent().next().andSelf().prevAll( '.plugin_pagetree_childtoggle_container' ).children( '.plugin_pagetree_childtoggle' ).click(); $( '.plugin_pagetree_children_container' ).stop( true , true ); // disable the slide up/down animations $( '.plugin_pagetree_childtoggle' ).on( 'click' , function() { $( '.plugin_pagetree_children_container' ).stop( true , true ); }); }); }()) </script> {html}

            Matt Fysh added a comment - - edited

            We're using Documentation theme configured to remove the page tree checkbox, with this snippet below added to the navigation panel.

            Features:

            • removes markers next to items that have no children
            • loads all pages in the tree on page load to prevent any delay when the user is trying to navigate the Space (showing a "Loading" screen to show just 3 children items is simply bad UX)
            • collapses the tree on page load, except the path to the currently selected page
            • turns off animations, people want to move around the tree as quickly as possible
            • bonus feature: as requested here, ensures the children of the currently selected page are expanded/displayed on page load
            {html}
            <link href="//fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:b|Actor" rel="stylesheet" type="text/css">
            <style>
            	body { font-family: 'Droid Sans'; }
            	h1, h2, h3, #title-heading { font-family: 'Actor', sans-serif !important; }
            	#children-section { display: none; }
            	.plugin_pagetree { padding-top: 14px; }
            	.plugin_pagetree_childtoggle_container > .no-children.icon { visibility: hidden; }
            </style>
            <script>
            	(function() {
            		// improve the page tree macro to prevent asynchronous loads of children when navigating the tree structure
            		var init = false;
            		AJS.bind('pagetree-children-loaded', function() {
            			if (init) { return; }
            			init = true;
            
            			var parentTogglesOfCurrent = $('.plugin_pagetree_current').parent().next()
            				.parents('.plugin_pagetree_children_container')
            				.andSelf()
            				.prevAll('.plugin_pagetree_childtoggle_container')
            				.children('.plugin_pagetree_childtoggle');
            
            			$('.plugin_pagetree_childtoggle').not(parentTogglesOfCurrent).click();
            			$('.plugin_pagetree_children_container').stop(true, true);
            
            			// disable the slide up/down animations
            			$('.plugin_pagetree_childtoggle').on('click', function() {
            				$('.plugin_pagetree_children_container').stop(true, true);
            			});
            		});
            	}())
            </script>
            {html}
            {pageTree:startDepth=10|searchBox=false}
            

            Matt Fysh added a comment - - edited We're using Documentation theme configured to remove the page tree checkbox, with this snippet below added to the navigation panel. Features: removes markers next to items that have no children loads all pages in the tree on page load to prevent any delay when the user is trying to navigate the Space (showing a "Loading" screen to show just 3 children items is simply bad UX) collapses the tree on page load, except the path to the currently selected page turns off animations, people want to move around the tree as quickly as possible bonus feature: as requested here, ensures the children of the currently selected page are expanded/displayed on page load {html} <link href= " //fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:b|Actor" rel= "stylesheet" type= "text/css" > <style> body { font-family: 'Droid Sans' ; } h1, h2, h3, #title-heading { font-family: 'Actor' , sans-serif !important; } #children-section { display: none; } .plugin_pagetree { padding-top: 14px; } .plugin_pagetree_childtoggle_container > .no-children.icon { visibility: hidden; } </style> <script> (function() { // improve the page tree macro to prevent asynchronous loads of children when navigating the tree structure var init = false ; AJS.bind( 'pagetree-children-loaded' , function() { if (init) { return ; } init = true ; var parentTogglesOfCurrent = $( '.plugin_pagetree_current' ).parent().next() .parents( '.plugin_pagetree_children_container' ) .andSelf() .prevAll( '.plugin_pagetree_childtoggle_container' ) .children( '.plugin_pagetree_childtoggle' ); $( '.plugin_pagetree_childtoggle' ).not(parentTogglesOfCurrent).click(); $( '.plugin_pagetree_children_container' ).stop( true , true ); // disable the slide up/down animations $( '.plugin_pagetree_childtoggle' ).on( 'click' , function() { $( '.plugin_pagetree_children_container' ).stop( true , true ); }); }); }()) </script> {html} {pageTree:startDepth=10|searchBox= false }

            @patrick, @kevin, check out the answers page which Daniel has linked. It helped me to implement this feature in 4.x and 5.x

            Hans-Peter Geier added a comment - @patrick, @kevin, check out the answers page which Daniel has linked. It helped me to implement this feature in 4.x and 5.x

            never having used 3.5 it would be a great feature and I too would have missed it. Our users often complain about how the expand/collapse of the navigation tree works

            Kevin Hughes added a comment - never having used 3.5 it would be a great feature and I too would have missed it. Our users often complain about how the expand/collapse of the navigation tree works

            We upgraded to a newer Version from 3.5 and really miss this feature.

            Patrick Schneider added a comment - We upgraded to a newer Version from 3.5 and really miss this feature.

            The child page list at the bottom of every page remembers its last state after every page load. Contrary to the subject of this ticket, we would like to automatically collapse page tree list . A happy medium would be a setting where one may choose the behavior - whether done globally or per user.

            Deleted Account (Inactive) added a comment - The child page list at the bottom of every page remembers its last state after every page load. Contrary to the subject of this ticket, we would like to automatically collapse page tree list . A happy medium would be a setting where one may choose the behavior - whether done globally or per user.

            I don't understand why the pagetree macro behaves differently in the default theme and the documentation theme.

            Hans-Peter Geier added a comment - I don't understand why the pagetree macro behaves differently in the default theme and the documentation theme.

              Unassigned Unassigned
              scahyadiputra Septa Cahyadiputra (Inactive)
              Votes:
              57 Vote for this issue
              Watchers:
              51 Start watching this issue

                Created:
                Updated: