JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<a class="btn btn_tab btn_tab_dark btn_filters btn_filter btn_filter_timeline" data-filter-class=".filter_timeline" href="#">
  <span class="btn_text">Timeline</span>
</a>  
<br/>
<a class="btn btn_tab btn_tab_dark btn_filters btn_filter btn_filter_alphabet"  data-filter-class=".filter_alphabet" href="#">
    <span class="btn_text">A-Z</span>
</a>

<div class="filter_timeline filter">
    filter_timeline
</div>
<div class="filter_alphabet filter">
    filter_alphabet
</div>

JavaScript

$(function() {
    var btn_filters = $('.btn_filter'),
        filters = $('.filter');

    filters.hide();

    btn_filters.on('click', function(event) {
        self = $(this);
        self.toggleClass('active').siblings().removeClass('active');

        filters.hide();
        var filter_class = self.data('filter-class');

        if (self.is('.active')) {
            $(filter_class).show();
        }

        event.preventDefault();
    });
});