Accordion Featured Users Template | Axero Documentation

The Accordion Featured Users template displays people in a collapsible section. The template is a built-in template and comes with your Axero site. To use the template:

1. Add a People Widget on a Page Builder page
2. Edit the widget
3. Set the type to People List
4. Select the Accordion Featured Users 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-accordion-featured-users {{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 list">
            <ul> 
               {{#each Contents}}
                <li>   
                    <div class="axero-section-list-avatar">
                        <a href="{{ProfileURL}}" title="{{{trim UserInfoDisplayName ../TitleCharacterLength}}}"><img alt="{{{trim UserInfoDisplayName ../TitleCharacterLength}}}" src="{{AvatarImageURL}}" /></a>
                    </div>
                    <div class="axero-section-list-content">
                        <div class="axero-section-list-content-title">
                        <a class="axero-user-card-link" data-user="{{UserID}}" href="{{ProfileURL}}" title="{{{trim UserInfoDisplayName ../TitleCharacterLength}}}">{{{trim UserInfoDisplayName ../TitleCharacterLength}}}</a>
                        </div>
                        <div class="axero-section-list-content-date">
                        {{{field:Occupation}}}
                        </div>                
                    </div>
                </li>                                                     
                {{/each}}
            </ul>
         </div>
         </div>
      </div>
   </div>
   {{#if ShowWidgetFooter}}
   <div class="axero-widget-footer">
      {{{FooterHTML}}}
   </div>
   {{/if}}
</div>
<script>
   var accordionFeaturedUsers{{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>