JSFiddle - React, Tailwind, and code Playground

by Elak

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>
-

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

var vidRnd = /(.vid_*)/;
var arrVidId = new Array("#vid_bla", "#vid_muh", "#vid_tschub");

for (var k in vidRnd) {
    
    $(k).click(function() {
        for (var i in arrVidId) {
            $(i).addClass("hidden").removeClass("visible");
        }
        $(k).addClass("visible").removeClass("hidden");
    });
};