JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<h3 class="itemTitle">Test 1</h3>
</div>
<div>
<h3 class="itemTitle">Test 2</h3>
</div>
<div>
<h3 class="itemTitle">Test 3</h3>
</div>
CSS
.active {
background: red;
}
JavaScript
$('div h3.itemTitle').on('click', function () {
// saves time not to write $(this).parent() everything so i store in a _parent var
var _parent = $(this).parent();
if (_parent.hasClass('active')) {
_parent.removeClass('active');
} else {
_parent.addClass('active').siblings().removeClass('active');
}
});
/* No longer needed */
/*
$('div.active').on('click', function () {
$(this).removeClass('active');
});
*/