JSFiddle - React, Tailwind, and code Playground

by optionsit

HTML

<ul class="woof_list woof_list_radio">
<li >
    <input type="radio" id="woof_72_55cb07a61800a" class="woof_radio_term" data-slug="elektronik" name="product_cat" value="72">
    <label for="woof_72_55cb07a61800a">Elektronik <span>(812)</span></label>
</li>
<li >
    <input type="radio" id="woof_113_55cb07a741fec" class="woof_radio_term" data-slug="pompa-air" name="product_cat" value="113" checked="checked">
    <label for="woof_113_55cb07a741fec" checked="checked">Pompa Air <span>(29)</span></label>
</li>
<li >
    <input type="radio" id="woof_184_55cb07a7513ac" class="woof_radio_term" data-slug="brand" name="product_cat" value="184">
    <label for="woof_184_55cb07a7513ac">Brand <span>(814)</span></label>
</li>

CSS

ul.woof_list li input[type="radio"]:checked + label {
      font-weight: bold;
}

JavaScript

$(document).ready(function(){

        $("ul.woof_list li input[type='radio']").click( function( e ) {
             
            // hide all li's (or show all)
            $( 'ul.woof_list li' ).toggle();
            $( '.woof_is_closed' ).trigger('click');
            
            // show only the selected li
            $(this).parent().show();

     	});
            
});