JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="verfijnResultaten">
    <div class="linkBlock verfijn lastVerfijnLinkblock">
        <h2 class="cufont">Vakgebied</h2>
        <ul>
                <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 8</li>
        </ul>
        <div class="control"></div>
    </div>
    <br/>
    <div class="linkBlock verfijn lastVerfijnLinkblock">
        <h2 class="cufont">Vakgebied</h2>
        <ul>
            <li class="verfijnZoekResulatenFilter">Gebonden (53)</li>
            <li class="verfijnZoekResulatenFilter">Lossbladig (25)</li>
        </ul>
        <div class="control"></div>
    </div>
</div>

CSS

.verfijnZoekResulatenFilter{display:block;}
h2{font-weight:600;}

ul {border:1px solid gold;}

JavaScript

// list item open close slideing segment independent
$(document).ready(function(){
    $('.verfijn ul').each(function(i) {
        var ul = $(this);
        var l = ul.children('li');
        var h = l.height();
        var showItems = 4;
        
        //ul.css({'height':(h*showItems)+'px','overflow':'hidden'});
        ul.siblings('.control').addClass('closed');
        
        if(ul.children('li').length >= showItems){
            ul.siblings('.control').html('<a href="#">open</a>');
            ul.css({'height':(h*showItems)+'px','overflow':'hidden'});
        }
        
    });
    $('.control').click(function(){
        var ul = $(this).parent().children("ul"), l = ul.children('li'), h = l.height();
        var me = $(this);
        if( me.is('.closed') ) {
            ul.parent().children("ul").animate({'height':(ul.height()>(h*5)?(h*5):(l.length*h))+'px'});
            me.removeClass('closed');
            me.addClass('open');
            $(this).html('<a href="#">Dicht</a>');
        } else {
            ul.animate({'height':(h*4)+'px','overflow':'hidden'});
            me.removeClass('open');
            me.addClass('closed');
            $(this).html('<a href="#">Open</a>');
        }
        return false;
    });
});