JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">A</div>
<div class="b">B</div>

<!-- Result -->
<div class="x" style="display:none">X</div>
<div class="y" style="display:none">Y</div>
<div class="z" style="display:none">Z</div>

JavaScript

$(".a").click(function () {
    var $this = $(this);
    $this.siblings(".x").toggle();
    checkZ();
});

$(".b").click(function () {
    var $this = $(this);
    $this.siblings(".y").toggle();
    checkZ();
});

function checkZ() {
    $('.z').hide();
    if ($('.x').is(':visible') && $('.y').is(':visible')) {
        $('.x').hide(500);
        $('.y').hide(500)
        $('.z').show();
    }
}