rhm-search-results

rhm-search-results

HTML

<div class="search-results">

  <div class="res-item">
    <h3 class="itm-title">Safety Documents</h3>
    <div class="documents-list">
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="load-more">Load More ></span>
    </div>
  </div>

  <div class="res-item">
    <h3 class="itm-title">Technical Documents</h3>
    <div class="documents-list">
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="load-more">Load More ></span>
    </div>
  </div>

  <div class="res-item">
    <h3 class="itm-title">Price Lists</h3>
    <div class="documents-list">
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of...

CSS

.res-item {
  padding: 10px 0 25px 10px;
  position: relative;
}

.res-item .itm-title {
  margin: 0 0 10px 0;
  background: gray;
  position: sticky;
  top: 0;
}

.documents-list span.document {
  clear: both;
  display: none;
}

.documents-list .load-more {
  position: absolute;
  bottom: 10px;
  left: 200px;
  cursor: pointer;
}

.documents-list .load-more:hover {
  color: lightblue;
}

.documents-list,
.no-results {
  margin-left: 15px;
}

.res-item .documents-list a:before {
  content: "";
  display: block;
  background: url('https://khazon.net/drupal-855/themes/drupal8_zymphonies_theme/images/pdf.svg') no-repeat;
  width: 20px;
  height: 20px;
  float: left;
  background-size: contain;
  padding-right: 5px;
}

JavaScript

$(document).ready(function() {
  var loadMore = 3;

  $('.search-results').find('.res-item').each(function(i, elem) {
    console.log(elem);
    console.log($(this).find('.document').size());
    var docNum = $(this).find('.document').size();

    var display = 2;

    $(this).find('.document:lt(' + display + ')').css('display', 'block');
  });


  $('.load-more').on('click', function() {
    var docNum = $(this).parent().find('.document').size();

    loadMore = (loadMore + 3 <= docNum) ? loadMore + 3 : docNum;
    console.log('docNum: ' + docNum + ' >>>> loadMore: ' + loadMore);

    $(this).parent().find('.document:lt(' + loadMore + ')').css('display', 'block');

    if (docNum === loadMore) {
      $(this).hide();
    }
  });

});