Help Center

Menu

Collapse and expand individual search results

Background

This article outlines how a show/hide button can be added to individual search results to enable lenthy result items (for example containing formatted html) to be collapsed and expanded.

Steps

The following steps are based on changes to the default template, but can be adapted for any search results template.

  1. Add JQuery code to expand/contract the results:

    <script>
    jQuery(document).ready( function() {
      <#-- Expand/contract functionality.  -->
      jQuery("#search-result .showhide").click(function() {
        $(this).parent().toggleClass("content-showall").toggleClass("content-truncate");
        if ($(this).hasClass("hideaction")) {
          $(this).text("Expand text");
          $(this).removeClass("hideaction");
        } else {
          $(this).text("Collapse text");
          $(this).addClass("hideaction");
        }
      });
    });
</script>

  2. Add a show/hide button to the item that should be collapsed:

    <ol id="search-results" class="list-unstyled" start="${response.resultPacket.resultsSummary.currStart}">
  <@s.Results>
    <#if s.result.class.simpleName != "TierBar">
       <li data-fb-result="${s.result.indexUrl}" class="result<#if !s.result.documentVisibleToUser>-undisclosed</#if>">
		<!-- add this button to expand/hide text -->
		<button class="showhide">Expand text</button>
        <h4 <#if !s.result.documentVisibleToUser>style="margin-bottom:4px"</#if>>
          <#if question.collection.configuration.valueAsBoolean("ui.modern.session")><a href="#" data-ng-click="toggle()" data-cart-link data-css="pushpin|remove" title="{{label}}"><small class="glyphicon glyphicon-{{css}}"></small></a></#if>

  3. Add a content-truncate style to the item to be truncated:

            <ol id="search-results" class="list-unstyled" start="${response.resultPacket.resultsSummary.currStart}">
          <@s.Results>
            <#if s.result.class.simpleName != "TierBar">
			<!-- add the content-truncate style to the element that will expand and contract -->
		    <li data-fb-result="${s.result.indexUrl}" class="content-truncate result<#if !s.result.documentVisibleToUser>-undisclosed</#if>">
				<button class="showhide">Expand text</button>
                <h4 <#if !s.result.documentVisibleToUser>style="margin-bottom:4px"</#if>>
                  <#if question.collection.configuration.valueAsBoolean("ui.modern.session")><a href="#" data-ng-click="toggle()" data-cart-link data-css="pushpin|remove" title="{{label}}"><small class="glyphicon glyphicon-{{css}}"></small></a></#if>

  4. Add CSS to handle the show/hide and button positioning

    <style>
	.content-showall {overflow:auto; height:auto; position:relative; padding-bottom:1.5em;}
	.content-truncate {overflow:hidden; height:150px; position:relative; box-shadow: inset 0px -50px 50px -50px grey; -moz-box-shadow: inset 0 -510px 50px -50px grey; -webkit-box-shadow: inset 0 -50px 50px -50px grey;}
	.showhide {position:absolute; bottom:10px; left:50%; width:250px; margin-left:-125px; color:#fff; background-color:#9a1904; padding:5px; cursor:pointer; border:1px solid #fff; z-index:1000;}
</style>