JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<section>
    <h5>Грузоподъемность</h5>
    <div class="filter-list overflowed">
        <ul>
            <li><label>0,7т</label></li>
            <li><label>0,8т</label></li>
            <li><label>0,9т</label></li>
            <li><label>0,10т</label></li>
            <li><label>0,11т</label></li>
            <li><label>0,12т</label></li>
            <li><label>0,13т</label></li>
            <li><label>0,14т</label></li>    
        </ul>
    </div>
    <div>
        <a href="#" class="filter-trigger js-open">Показать еще</a>
        <a href="#" class="filter-trigger js-hide">Скрыть</a>
    </div>
</section>

<section>
    <h5>Грузоподъемность</h5>
    <div class="filter-list overflowed">
        <ul>
            <li><label>0,7т</label></li>
            <li><label>0,8т</label></li> 
        </ul>
    </div>
    <a href="#" class="filter-trigger">Показать еще</a>
    <a href="#" class="filter-trigger">Скрыть</a>
</section>

CSS

section {
    display: block;
    margin-bottom: 20px;
}
section ul, section h5 {
    margin-top: 0;
    margin-bottom: 0;
}

.filter-trigger {
    display: none;
}

.filter-list {
    overflow: hidden;
-webkit-transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

.overflowed li:nth-child(1n+5) {
    display: none;
}

.visible {
    display: inline-block;
}

JavaScript

var Switcher = function ($container) {
    this.$container = $container;
    this.$filter = this.$container.find(".filter-list");
    this.$list = this.$container.find("ul");
    this.$elems = this.$container.find("li");
    this.$open_btn = this.$container.find(".js-open");
    this.$hide_btn = this.$container.find(".js-hide");
    
    this.num = this.$elems.length;
    this.min_height = 0;
    this.max_height = 0;
};

Switcher.prototype = {
    init: function () {
        if (this.num < 4) {
            return;
        }
        
        this.min_height = this.$list.outerHeight();
        this.$filter.height(this.height);
        
        this.$filter.removeClass("overflowed");
        this.max_height = this.$list.outerHeight();        
        
        this.$open_btn.on("click", this.open.bind(this));
        this.$hide_btn.on("click", this.hide.bind(this));
        
        this.hide();
    },
    
    open: function (e) {
        e && e.preventDefault();
        
        this.$filter.height(this.max_height);
        
        this.$open_btn.removeClass("visible");
        this.$hide_btn.addClass("visible");
    },
    
    hide: function (e) {
        e && e.preventDefault();
        
        this.$filter.height(this.min_height);
        
        this.$open_btn.addClass("visible");
        this.$hide_btn.removeClass("visible");
    }
};



$("section").each(function (i) {
    var $container = $(this);
    var inst = new Switcher($container);
    inst.init();
});