Collapse and expand individual search results

Managed by | Updated 5 years ago.

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>">
   ===>    <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">
   ==>   <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>