Accordion Icon List Template | Axero Documentation

The Accordion Icon List template displays content in a collapsible section. The template is a built-in template and comes with your Axero site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Select the Accordion Icon List template in the Template tab

Template HTML

Below is the HTML of this template for your reference.

<div id="accordionCustom-{{WidgetID}}" class="axero-widget axero-widget-entity-icon-list axero-widget-accordion-icon-list {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
   <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">
            <ul> 
               {{#each Contents}}
                  <li>
                     <div class="entity-icon">
                        <i class="{{EntityIconCssClass}}"></i>
                     </div>
                     <div class="entity-title">
                        <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                     </div>
                  </li>
               {{/each}}
            </ul>
         </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>