JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid_12" id="category-nav">
    <ul id="category" class="list-of-links centered">
        <li><a href="#" class="current-cat" data-filter="rondvaart">Rondvaart</a></li>
        <li><a href="#" data-filter="wandelingen">Wandelingen</a></li>
        <li><a href="#" data-filter="rondleidingen">Rondleidingen</a></li>
        <li><a href="#" data-filter="groepsarrangementen">Groepsarrangementen</a></li>
    </ul>
    
</div><!-- End div.grid_12 #category-nav -->

<article class="post" data-cat="wandelingen">
    <header>
        <p class="byline">Rondvaart</p>
        <h2>Binnendieze</h2>
    </header><!-- End header -->
    
</article><!-- End article.post -->

<article class="post" data-cat="rondleidingen">
    <header>
        <p class="byline">Rondvaart</p>
        <h2>Binnendieze</h2>
    </header><!-- End header -->
    
</article><!-- End article.post -->

<article class="post" data-cat="wandelingen">
    <header>
        <p class="byline">Rondvaart</p>
        <h2>Binnendieze</h2>
    </header><!-- End header -->
    
</article><!-- End article.post -->

JavaScript

// Variable
var posts = $('.post');
posts.hide();

// Click function
$( "#category li a" ).click(function() { 
    // Get data of category
    var customType = $( this ).data('filter'); // category
    console.log(customType);
    console.log(posts.length); // Length of articles
    
    posts
        .hide()
        .filter(function () {
            return $(this).data('cat') === customType;
        })
        .show();
});