JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<div id="filterEl_23e561e9-118b-49ae-b32a-45a1ac5c370a-wrapper" class="ui-buttonset"><input value="" name="e[23e561e9-118b-49ae-b32a-45a1ac5c370a]" type="radio" id="filterel23e561e9-118b-49ae-b32a-45a1ac5c370a" class="ui-helper-hidden-accessible"><label for="filterel23e561e9-118b-49ae-b32a-45a1ac5c370a" class="radio-lbl ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" title=" - Все - " role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text"> - Все - </span></label>
	<input value="Вторичное жилье" name="e[23e561e9-118b-49ae-b32a-45a1ac5c370a]" type="radio" id="filterel23e561e9-118b-49ae-b32a-45a1ac5c370avtorichnoe-zhile" class="vtorichnoe-zhile ui-helper-hidden-accessible"><label for="filterel23e561e9-118b-49ae-b32a-45a1ac5c370avtorichnoe-zhile" class="radio-lbl vtorichnoe-zhile ui-button ui-widget ui-state-default ui-button-text-only" title="Вторичное жилье" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Вторичное жилье</span></label>
	<input value="Загородная недвижимость" name="e[23e561e9-118b-49ae-b32a-45a1ac5c370a]" type="radio" id="filterel23e561e9-118b-49ae-b32a-45a1ac5c370azagorodnaya-nedvizhimost" class="zagorodnaya-nedvizhimost ui-helper-hidden-accessible" checked="checked"><label for="filterel23e561e9-118b-49ae-b32a-45a1ac5c370azagorodnaya-nedvizhimost" class="radio-lbl zagorodnaya-nedvizhimost ui-button ui-widget ui-state-default ui-button-text-only" title="Загородная недвижимость" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Загородная недвижимость</span></label>
	<input value="Коммерческая недвижимость" name="e[23e561e9-118b-49ae-b32a-45a1ac5c370a]" type="radio" id="filterel23e561e9-118b-49ae-b32a-45a1ac5c370akommercheskaya-nedvizhimost" class="kommercheskaya-nedvizhimost ui-helper-hidden-accessible"><label for="filterel23e561e9-118b-49ae-b32a-45a1ac5c370akommercheskaya-nedvizhimost" class="radio-lbl...

JavaScript

<div class="custom">
	 <script type="text/javascript">
(function($){
$('.vtorichnoe-zhile').click(function () {
$('.cat_kom_snyat').hide();
$('.etaj_snyat').show();
$('.etaj2').show();
$('.ploshad2').show();
$('.etaj').show();
$('.snyat_cat_kom').hide();
$('.width1000a').show();
});
})(jQuery); 
</script>


<script type="text/javascript">
(function($){
$('.zagorodnaya-nedvizhimost').click(function () {
$('.cat_kom_snyat').show();
$('.etaj_snyat').hide();
$('.snyat_cat_kom').hide();
$('.width1000a').hide();
});
})(jQuery); 
</script>
 

 
<script type="text/javascript">
(function($){
$('.kommercheskaya-nedvizhimost').click(function () {
$('.cat_kom_snyat').hide();
$('.etaj_snyat').hide();
$('.snyat_cat_kom').show();
$('.width1000a').hide();
});
})(jQuery); 
</script>
 
 
 <script type="text/javascript">
(function($){
$('.pansionaty-komnaty').click(function () {
$('.cat_kom_snyat').hide();
$('.snyat_cat_kom').hide();
$('.width1000a').hide();
});
})(jQuery); 
</script>
 
 
 
 
 
 
 
 
 
 



   <script type="text/javascript">
(function($){  
    $(document).ready(function() {
        refresh_desr(); 
    });
    $('.radio-lbl').click(function() {   
        refresh_desr();        
    });    
    
    
function refresh_desr () {
setTimeout(function() {
    var sl_number = $('.radio-lbl').index($('.ui-state-active'));
    if (sl_number == '1') {
$('.dom-sdan').hide();
$('.zagorod').hide();
$('.cat_zagorod').hide();
$('.cat_kom').hide();
    }
    else if (sl_number == '2') {
   $('.dom-sdan').hide();
    $('.etaj').hide();
    $('.zagorod').show();
    $('.etaj2').hide();
    $('.cat_zagorod').show();    
    $('.cat_kom').hide();
    $('.ploshad2').hide();
    }
    else if (sl_number == '3') {
   $('.dom-sdan').hide();
    $('.etaj').hide();
    $('.zagorod').hide();    
    $('.cat_zagorod').hide();
    $('.cat_kom').show();
    $('.ploshad2').show();
    }
     else if (sl_number == '4') {
     $('.dom-sdan').show();
     $('.etaj').show();
    ...