JSFiddle - React, Tailwind, and code Playground

HTML

<div id="years_links"> <a href="#" data-id="2013">2013</a> | <a href="#" data-id="2012">2012</a> | <a href="#" data-id="2011">2011</a>

</div>
<div id="yearscontent">
    <div id="2013" class="active">
        <div class='item'>some 2013 stuff</div>
    </div>
    <div id="2012">
        <div class='item'>some 2012 stuff</div>
    </div>
    <div id="2011">
        <div class='item'>some 2011 stuff</div>
    </div>
</div>

CSS

#yearscontent div:nth-child(1n+2) {
    display:none;
}

JavaScript

$(document).ready(function () {
    var yearscontent = $('#yearscontent');
    $('#years_links a').click(function () {
        var year = $(this).attr('data-id');
        $('#yearscontent > .active').slideUp(300, function () {
            $(this).removeClass("active");
            $('#yearscontent > #' + year).slideDown(300).addClass("active");
            
        });
    });

});



// I want to be able to click on the year links and have it slideDown only the respective year div