JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<ul class="wwd-filters">
   <li><a data-id="corporate" href="#corporate"><span>Corporate</span></a></li>
   <li><a data-id="commercial" href="#commercial"><span>Commercial</span></a></li>
   <li><a data-id="construction" href="#construction"><span>Construction</span></a></li>
</ul>
<div class="wwd-content-container">
<div class="wwd-content-each corporate">
     <h2>Corporate</h2>

    <div class="wwd-slides">
        <div class="slides_container">
            <p>Lorem ipsum lorem ipsum lorem ipsum</p>
        </div>
    </div>
</div>
<div class="wwd-content-each commercial">
     <h2>Commercial</h2>

    <div class="wwd-slides">
        <div class="slides_container">
            <p>Lorem ipsum lorem ipsum lorem ipsum</p>
        </div>
    </div>
</div>
</div>

CSS

.wwd-content-each {
    display: none;
}

JavaScript

$('.wwd-filters').on('click', 'a', function(e) {
    e.preventDefault();
    var id = $(this).data('id');
    console.log(id);
    $('.wwd-content-container .wwd-content-each').fadeOut();
    $('.wwd-content-container .wwd-content-each').promise().done(function(){
    // will be called when all the animations on the queue finish
        console.log('.wwd-content-container .wwd-content-each ' + id);
        $('.wwd-content-container .wwd-content-each.' + id).fadeIn();
    });
    
});