JSFiddle - React, Tailwind, and code Playground

by Neal

HTML

<div id="showHide1">
   <a class="show aaa">AAA</a>
   <a class="hide bbb">BBB</a>
</div>

<div id="showHide2">
   <a class="show aaa">AAA</a>
   <a class="hide bbb">BBB</a>
</div>

CSS

.show {

}

.hide {
   display: none;
}

JavaScript

$('#showHide1, #showHide2').click(function() {
    var a_showing = $('.aaa.show', this);
    var a_hiding  = $('.aaa.hide', this);
    var b_showing = $('.bbb.show', this);
    var b_hiding  = $('.bbb.hide', this);
    a_showing.addClass('hide').removeClass('show')
    a_hiding.addClass('show').removeClass('hide')
    b_showing.addClass('hide').removeClass('show')
    b_hiding.addClass('show').removeClass('hide')
})