JSFiddle - React, Tailwind, and code Playground

HTML

<div class="verfijnResultaten">
    <div class="linkBlock verfijn">
        <h2 class="cufont">Verfijn resutlaat</h2>
        <ul>
            <li class="verfijnZoekResulatenFilter"> Boeken (122)</li>
            <li class="verfijnZoekResulatenFilter"> Abonnementen (12)</li>
        </ul>    
    </div>
    <div class="linkBlock verfijn">
        <h2 class="cufont">Vakgebied</h2>
        <ul class="controlList">
            <li class="verfijnZoekResulatenFilter">Gebonden (53)</li>
            <li class="verfijnZoekResulatenFilter">Paperback (45)</li>
            <li class="verfijnZoekResulatenFilter">Tijdschrift (25)</li>
        </ul>
        <div class="control"></div>
    </div>
    <br/>
    <div class="linkBlock verfijn">
        <h2 class="cufont">Vakgebied</h2>
        <ul class="controlList">
            <li class="verfijnZoekResulatenFilter">Gebonden (53)</li>
            <li class="verfijnZoekResulatenFilter">Paperback (45)</li>
            <li class="verfijnZoekResulatenFilter">Tijdschrift (25)</li>
            <li class="verfijnZoekResulatenFilter">Online (22)</li>
            <li class="verfijnZoekResulatenFilter">Item 5</li>
            <li class="verfijnZoekResulatenFilter">Item 6</li>
            <li class="verfijnZoekResulatenFilter">Item 7</li>
            <li class="verfijnZoekResulatenFilter">Item 5</li>
            <li class="verfijnZoekResulatenFilter">Item 6</li>
            <li class="verfijnZoekResulatenFilter">Item 7</li>
        </ul>
        <div class="control"></div>
    </div>
</div>

CSS

.linkBlock.verfijn h2{padding: 0 0 5px;color:#004759;font-weight:600;}
.linkBlock.verfijn .controlList{margin:0!important;}
.linkBlock.verfijn .control.open{ margin-top:8px;height:20px;}

JavaScript

$(function(){

    $('.verfijn ul').each(function(i) {
        var limiter = 4; //show 4 times
        var ul = $(this);
        var l = ul.children('li');
        var h = l.height();
        
        console.log($(".controlList li").length);
// begin to:do        
        
        var lol = $('.controlList li');
        $('.controlList').each(function(){
            if($(lol).length < 5){
                alert('dsfds');
            }  
        });
        
// end to:do      
        ul.css({'height':(h*limiter)+'px','overflow':'hidden'});
        $(this).siblings('.control').addClass('closed');
        $(this).siblings('.control').html('<a href="#">Meer...</a>');
    });
    $('.control').click(function(){
        var ul = $(this).parent().children("ul");
        var l = ul.children('li');
        var h = l.height();
        var controlerClass = $(this);
        if( controlerClass.is('.closed') ) {
            ul.parent().children("ul").animate({'height':(ul.height()>(h*5)?(h*5):(l.length*h))+'px'});
            controlerClass.removeClass('closed');
            controlerClass.addClass('open');
            $(this).html('<a href="#">Minder...</a>');
        } else {
            ul.animate({'height':(h*4)+'px','overflow':'hidden'});
            controlerClass.removeClass('open');
            controlerClass.addClass('closed');
            $(this).html('<a href="#">Meer...</a>');
        }
        return false;
    });
});