JSFiddle - React, Tailwind, and code Playground
HTML
Genre:<br />
<input type="radio" name="group1" value="All" checked>Show All<br />
<input type="radio" name="group1" value="Adventure">Adventure<br />
<input type="radio" name="group1" value="Puzzle">Puzzle<br />
<input type="radio" name="group1" value="Shooter">Shooter
<div id="games">
<div class="adv">Adventure<br />Lorem ipsum dolor sit</div>
<div class="adv">Adventure<br />Lorem ipsum dolor sit</div>
<div class="adv">Adventure<br />Lorem ipsum dolor sit</div>
<div class="puz">Puzzle<br />Lorem ipsum dolor sit</div>
<div class="puz">Puzzle<br />Lorem ipsum dolor sit</div>
<div class="sho">Shooter<br />Lorem ipsum dolor sit</div>
<div class="adv">Adventure<br />Lorem ipsum dolor sit</div>
<div class="sho">Shooter<br />Lorem ipsum dolor sit</div>
<div class="sho">Shooter<br />Lorem ipsum dolor sit</div>
<div class="sho">Shooter<br />Lorem ipsum dolor sit</div>
<div class="adv">Adventure<br />Lorem ipsum dolor sit</div>
<div class="adv">Adventure<br />Lorem ipsum dolor sit</div>
<div class="adv">Adventure<br />Lorem ipsum dolor sit</div>
<div class="sho">Shooter<br />Lorem ipsum dolor sit</div>
<div class="sho">Shooter<br />Lorem ipsum dolor sit</div>
<div class="puz">Puzzle<br />Lorem ipsum dolor sit</div>
</div>
CSS
#games > div {
border: 1px solid gray;
border-radius: 5px;
margin: 5px;
padding: 5px;
width: 150px;
height: 100px;
display: inline-block;
}
.adv {
background-color: #099;
}
.puz {
background-color: #3C9;
}
.sho {
background-color: #F99;
}
JavaScript
$('input[name$="group1"]').click(function () {
var radio_value = $(this).val();
if (radio_value == 'Adventure') {
$('#games div').not('.adv').fadeTo(3000,0.2,function () {
$('#games .adv').fadeTo(3000,1);
});
} else if (radio_value == 'Puzzle') {
$('#games div').not('.puz').fadeTo(3000,0.2,function () {
$('#games .puz').fadeTo(3000,1);
});
} else if (radio_value == 'Shooter') {
$('#games div').not('.sho').fadeTo(3000,0.2,function () {
$('#games .sho').fadeTo(3000,1);
});
} else if (radio_value == 'All') {
$('#games div').fadeTo(3000,0.2,function () {
$('#games div').fadeTo(3000,1);
});
}
});