Accordion Navigation Template | Axero Documentation

Create a collapsible menu for the Navigation widget. You can use the Navigation widget to link to specific content, personal tools, external pages, and more.

Add Template

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. Enter Accordion Navigation as the Template Name.
4. Select Navigation as the Widget Type.
5. Set Link item template to Default Unordered List Item.
6. Set Sub menu template to Disabled.
7. Set Group template to Default Unordered List Group.
8. In the editor, paste the following code.

   <div id="accordionCustom-{{WidgetID}}" class="axero-widget axero-widget-advanced-nav-list accordion-nav {{CustomCSSClass}}{{#if HideContainerBorder}} axero-widget-no-border{{/if}}">
       {{#if ShowWidgetHeader}}
       <div class="accordion-group">
           <div class="accordion-heading">
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionCustom" href="#accordion-item-{{WidgetID}}"><span class="pull-right"><i class="icon-chevron-down"></i></span>{{WidgetTitle}}</a>
           </div>
           <div id="accordion-item-{{WidgetID}}" class="accordion-body collapse">
               <div>
                   <div class="accordion-inner">
                       {{/if}}
                       <div class="axero-widget-body axero-widget-content-padded">
                           <ul>
                               {{{Contents.ChildWidgetHTML}}}
                           </ul>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   {{#if ShowWidgetFooter}}
   <div class="axero-widget-footer">
       {{{FooterHTML}}}
   </div>
   {{/if}}
   </div>
   <script>
      var accordionIconList{{WidgetID}} = function () {
   	   var $accordianBody = jQuery('#accordion-item-{{WidgetID}}');
   
   	   $accordianBody.on('shown',
   		  function() {
   			 jQuery(this).parent("div").find(".icon-chevron-down").removeClass("icon-chevron-down")
   			 .addClass("icon-chevron-up");
   	   });
   
   	   $accordianBody.on('hidden',
   		  function() {
   			 jQuery(this).parent("div").find(".icon-chevron-up").removeClass("icon-chevron-up")
   			 .addClass("icon-chevron-down");
   		  });
      }();
   </script>

9. Click Save Template.

Add CSS Overrides

1. Click System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for Accordion Navigation template*/
   .axero-widget-advanced-nav-list.accordion-nav .axero-widget-body {
       padding: 0
   }
   .axero-widget.accordion-nav .accordion-heading a.accordion-toggle {
       padding-left: 20px;
       padding-top: 10px;
   }

3. Click Save CSS Overrides.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a layout onto the page. 
3. Click the Widgets tab.
4. Drag a Navigation widget onto the page. This template is best used in small to mid-sized columns - between 2 and 6.
5. On the Navigation widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. In Navigation Items, configure an item.
8. Click the Template tab.
9. Select the Accordion Navigation template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.