JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="facet-search-container">
                
<div class="facets search-aggregations">
    <h3>Filter by:</h3>
    <div class="facets-clear-filters">
        <div class="angularRefreshAfterAjax">
            <a href="#!" onclick="javascript: window.uncheckAll()" data-filters="all" class="ng-isolate-scope"><i class="icon icon-facet-clear" style="margin-right:0"></i>
            <span class="icon-facet-text">Clear all</span></a>
        </div>
    </div>
    <hr>
        <h3 class="title">By Year</h3>
        <ul class="facet-group search-facets-group" data-facet="y">
                <li class="search-facet">
                    <label class="facet-label" data-value="2017">
                        <input class="checkbox" value="2017" type="checkbox" data-facet="y"><span class="key">2017</span>&nbsp;<span class="count">(61)</span>
                    </label>
                </li>
                <li class="search-facet">
                    <label class="facet-label" data-value="2018">
                        <input class="checkbox" value="2018" type="checkbox" data-facet="y"><span class="key">2018</span>&nbsp;<span class="count">(13)</span>
                    </label>
                </li>
            <li class="toggler">
                <a href="#!" class="facets-toggler" onclick="javascript:toggleShowMore(this)"><i class="icon icon-facet-arrow"></i>Show More</a>
            </li>
            <hr>
        </ul>
        <h3 class="title">By Region</h3>
        <ul class="facet-group search-facets-group" data-facet="r">
                <li class="search-facet">
                    <label class="facet-label" data-value="Africa">
                        <input class="checkbox" value="Africa" type="checkbox" data-facet="r"><span class="key">Africa</span>&nbsp;<span class="count">(7)</span>
                    </label>
                </li>
                <li...

JavaScript

$(document).ready(function(){
    $(".search-facet").each(function(){
      if($(this).index() > 4)
        $(this).addClass('hidden-limit')
    });
    $(".facet-group").each(function(){
     var len = $(this).find('.search-facet').length;
     if (len>5)
        $(this).find('.toggler').css('display','block');
     else
        $(this).find('.toggler').css('display','none');  	
    });
})