JSFiddle - React, Tailwind, and code Playground

HTML

<a class="click-trigger" href="#"></a>
<div class="element"></div>
<a class="click-trigger" href="#"></a>
<div class="element"></div>

CSS

.click-trigger,
.element { height: 20px; width: 20px; }
.click-trigger { background-color: red; display: block; }
.element { background-color: blue; }

.hidden { display: none; }
.shown { display: block; }

/*
display alternatives not supported by jQuery's 'show()':

display: inline;
display: inline-block;
display: list-item;
display: flex;
display: inline-flex;
display: table;
display: inline-table;
display: table-row-group;
display: table-column;
display: table-column-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-caption;
*/

JavaScript

var c = $('.click-trigger');
var e = $('.element');
c.click(function() {
    if (e.hasClass('hidden')) {
        e.removeClass('hidden').addClass('show');
    } else {
        e.removeClass('shown').addClass('hidden');
    }
});