JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="vidkategorie vidkat_first">
            <li><a class="vid_active vid_link vid_alle" href="#">All</a></li>
            <li><a class="vid_inactive vid_link vid_bla" href="#">Category 1</a></li>
            <li><a class="vid_inactive vid_link vid_muh" href="#">Category 2</a></li>
            <li><a class="vid_inactive vid_link vid_tschub" href="#">Category 3</a></li>
        </ul>
        
        <ul id="vid_bla" class="vidkategorie vidkat_follow hidden">
            <li class="vid_title">Category 1</li>
            <li><a class="vid_inactive vid_link" href="#">Link 1</a></li>
            <li><a class="vid_inactive vid_link" href="#">Link 2</a></li>
            <li><a class="vid_inactive vid_link" href="#">Link 1 3</a></li>
        </ul>

        <ul id="vid_muh" class="vidkategorie vidkat_follow hidden">
            <li class="vid_title">Category 2</li>
            <li><a class="vid_inactive vid_link" href="#">Link 1</a></li>
            <li><a class="vid_inactive vid_link" href="#">Link 2</a></li>
            <li><a class="vid_inactive vid_link" href="#">Link 1 3</a></li>
        </ul>

        <ul id="vid_tschub" class="vidkategorie vidkat_follow hidden">
            <li class="vid_title">Category 3</li>
            <li><a class="vid_inactive vid_link" href="#">Link 1</a></li>
            <li><a class="vid_inactive vid_link" href="#">Link 2</a></li>
            <li><a class="vid_inactive vid_link" href="#">Link 1 3</a></li>
        </ul>

CSS

body {
    background: #222;
}

.vidkategorie li {
    display: inline;
    padding: 0 5px;
}

.vidkategorie li a {
    text-decoration: none;
    font-size: 0.7em;
    padding-bottom: 3px;
}

.vid_active {
    color: #ffa500;
    border-bottom: 1px dotted #ffa500;
    padding-bottom: 3px;
}

.vid_inactive {
    color: #ececec;
}

.vid_inactive:hover {
    border-bottom: 1px dotted #ececec;
    padding-bottom: 3px;
}

.vidkat_follow {
    margin: 10px 0 0 34px;
}

.vid_title {
    color: #ffa500;
    font-weight: bold;
    font-size: 0.7em;
    margin-left: 5px;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

JavaScript

$(".vid_alle",".vidkat_first").click(function () {
        $(".vidkat_follow").show();
    });
    $(".vid_link", ".vidkat_first").not(".vid_alle").click(function () {
        $(".vidkat_follow").hide();
        var catLink = this;
        $(".vidkat_follow").each(function(index, elem){
            if ($(catLink).hasClass(elem.id)) {
                $(elem).show();
            }
        });
        
    });