JSFiddle - React, Tailwind, and code Playground

by rudiedirkx

HTML

<div id="listHolder">
    <div class="listItem inactive" data-filter-class="["filter1"]">a</div>
    <div class="listItem inactive" data-filter-class="["filter2"]">b</div>
    <div class="listItem inactive" data-filter-class="["filter1"]">c</div>
    <div class="listItem inactive" data-filter-class="["filter4"]">d</div>
    <div class="errorItem">Nothing to display here</div>
</div>

<p>Click a, b etc</p>

CSS

.inactive {
    opacity: 0.2;
}
.listItem:not(.inactive) ~ .errorItem {
    display: none;
}

JavaScript

$('div').on('click', '.listItem', function() {
    $(this).toggleClass('inactive');
});