JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<div class="pane sub-levels-3s">Tab 1
    <input type="checkbox" value="1" data-val="1">value 1
    <input type="checkbox" value="2" data-val="2">value 2
    <input type="checkbox" value="3" data-val="3">value 3
    <input type="checkbox" value="4" data-val="4">value 4
    <input type="checkbox" value="5" data-val="5">value 5
</div>
<div class="pane sub-levels-3s">Tab 2
    <input type="checkbox" value="1" data-val="1">value 1
    <input type="checkbox" value="2" data-val="2">value 2
    <input type="checkbox" value="3" data-val="3">value 3
    <input type="checkbox" value="4" data-val="4">value 4
    <input type="checkbox" value="5" data-val="5">value 5
</div>
<div class="pane sub-levels-3s">Tab 3
    <input type="checkbox" value="1" data-val="1">value 1
    <input type="checkbox" value="2" data-val="2">value 2
    <input type="checkbox" value="3" data-val="3">value 3
    <input type="checkbox" value="4" data-val="4">value 4
    <input type="checkbox" value="5" data-val="5">value 5
</div><br />
<small class="zen">div.pane.sub-levels-3s{Tab $}*3>input[type=checkbox value=$ data-val=$]{value $}*5</small>

CSS

* {display: block;}
.pane:first-line {height: 2em; vertical-align: top; background: yellow; width: 400px; display: block;}
.pane input[type="checkbox"]:before {
    content: attr("type");
    width: 50px;
}

JavaScript

function initFilter() {
$('.sub-level-3s').each(function() {
if ($(this).find('input:checkbox:checked').size() > 0) {
$(this).show();
}
});
}