JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://eurohouse.ua/templates/yoo_master2/warp/vendor/uikit/js/uikit.js"></script>
<link rel="stylesheet" href="http://eurohouse.ua/templates/yoo_master2/css/theme.css">
<script src="https://getuikit.com/v2/docs/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://getuikit.com/v2/docs/css/uikit.docs.min.css">
<div id="squarefilter" class="uk-grid uk-grid-small uk-margin-large-top" data-uk-grid-margin>
    <div id="fp1" class="filter_parent uk-width-large-1-6 uk-width-1-2">
        <div class="uk-panel">
            <figure class="uk-overlay">
                <img src="/images/do90.jpg">
                <figcaption class="uk-overlay-panel uk-overlay-background">до 90 м2</figcaption>
            </figure>
        </div>
    </div>
    <div id="fp2" class="filter_parent uk-width-large-1-6 uk-width-1-2">
        <div class="uk-panel">
            <figure class="uk-overlay">
                <img src="/images/90-100.jpg">
                <figcaption class="uk-overlay-panel uk-overlay-background">90 - 100 м2</figcaption>
            </figure>
        </div>
    </div>
    <div id="fp3" class="filter_parent uk-width-large-1-6 uk-width-1-2">
        <div class="uk-panel">
            <figure class="uk-overlay">
                <img src="/images/100-130.jpg">
                <figcaption class="uk-overlay-panel uk-overlay-background">100 - 130 м2</figcaption>
            </figure>
        </div>
    </div>
    <div id="fp4" class="filter_parent uk-width-large-1-6 uk-width-1-2">
        <div class="uk-panel">
            <figure class="uk-overlay">
                <img src="/images/130-150.jpg">
                <figcaption class="uk-overlay-panel uk-overlay-background">130 - 150 м2</figcaption>
            </figure>
        </div>
    </div>
    <div id="fp5" class="filter_parent uk-width-large-1-6 uk-width-1-2">
        <div class="uk-panel">
            <figure class="uk-overlay">
                <img src="/images/150-200.jpg">
               ...

CSS

#squarefilter .uk-overlay-background {
  background: rgba(0, 0, 0, 0.5);
}

.hiddenblock {
  -webkit-transition: max-height 1s; 
  -moz-transition: max-height 1s; 
  -ms-transition: max-height 1s; 
  -o-transition: max-height 1s; 
  transition: max-height 1s;
  overflow: hidden;
  max-height: 0;
}

#squarefilter .act {
  max-height: 1200px;
  -webkit-transition: max-height 1s; 
  -moz-transition: max-height 1s; 
  -ms-transition: max-height 1s; 
  -o-transition: max-height 1s; 
  transition: max-height 1s;
}

JavaScript

jQuery('.filter_parent').click(function(){
        
        var myvar = jQuery(this).attr('id');
        console.log(myvar);
        
        jQuery(".hiddenblock").not(jQuery("#c-" + myvar)).removeClass('act');
        jQuery("#c-" + myvar).toggleClass('act');
        
        
        if(window.matchMedia('(max-width: 768px)').matches)
    		{
    			switch(myvar) {
    				case 'fp1':
    					jQuery( "#fp2" ).after( jQuery( "#c-fp1" ) );
    				
    				case 'fp2':
    					jQuery( "#fp2" ).after( jQuery( "#c-fp2" ) );
    					
    				case 'fp3':
    					jQuery( "#fp4" ).after( jQuery( "#c-fp3" ) );
    					
    				case 'fp4':
    					jQuery( "#fp4" ).after( jQuery( "#c-fp4" ) );
    					
    				case 'fp5':
    					jQuery( "#fp6" ).after( jQuery( "#c-fp5" ) );
    					
    				case 'fp6':
    					jQuery( "#fp6" ).after( jQuery( "#c-fp6" ) );
    			}
    		    
    		}
        
    	})