JSFiddle - React, Tailwind, and code Playground
HTML
<section>
<h5>Грузоподъемность</h5>
<div class="overflowed filter-overflow">
<ul class="">
<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>
<a style="display: inline-block;" href="#" class="filter-height-trigger">Показать еще</a>
</section>
<section>
<h5>Грузоподъемность</h5>
<div class="overflowed filter-overflow">
<ul class="">
<li><label>0,7т</label></li>
<li><label>0,8т</label></li>
</ul>
</div>
<a style="display: inline-block;" href="#" class="filter-height-trigger">Показать еще</a>
</section>
CSS
.filter-overflow {
max-height: 110px;
}
.overflowed {
overflow: hidden;
}
JavaScript
$('.filter-height-trigger').hide();
var count = $('.filter-height-trigger').parent().find('.filter-overflow ul li').length;
if (count > 4) {
$('.filter-height-trigger').show();
$('.filter-height-trigger').click(function(e){
var $this = $(this);
var openedText = 'Свернуть';
var closedText = 'Показать еще';
var defaultHeight = 110;
var targetHeight = $this.parent().find('.filter-overflow ul').height();
//var targetHeight = 'none';
var overflowWrap = $this.parent().find('.filter-overflow');
var animationTime = 300
e.preventDefault();
$this.toggleClass('open');
if ( $this.hasClass('open') ) {
$this.text(openedText);
overflowWrap.stop().animate({'maxHeight' : targetHeight}, animationTime);
} else {
$this.text(closedText);
overflowWrap.stop().animate({'maxHeight' : defaultHeight}, animationTime);
}
})
}