JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Toggles -->
<div class="a">a</div>
<div class="b">b</div>
<!-- Result -->
<div class="x" style="display:none">class x</div>
<div class="y" style="display:none">class y</div>
<div class="z" style="display:none">class z</div>

JavaScript

<!-- Script -->
$(".a").click(function () {

    var $this = $(this);
    if ($this.siblings(".y").css('display') != 'none' && $this.siblings(".x").css('display') == 'none') {
        //now Hide y and show Z  
        $this.siblings(".y").toggle();
        $this.siblings(".z").toggle();
    } else {
        $this.siblings(".z").css('display', 'none');
        $this.siblings(".x").toggle();
    }
});


$(".b").click(function () {
    var $this = $(this);
    if ($this.siblings(".x").css('display') != 'none' && $this.siblings(".y").css('display') == 'none') {
        //now Hide y and show Z   
        $this.siblings(".x").toggle();
        $this.siblings(".z").toggle();
    } else {
        $this.siblings(".z").css('display', 'none')
        $this.siblings(".y").toggle();
    }
});