JSFiddle - React, Tailwind, and code Playground

by Pavel Mareš

HTML

<div class="col-md-6 rew">
	<div class="nadpis kanit gf">
		Novinky  
		<div class="ikonkkyw">
			<a data-filter="all" href="#">všechny</a> 
			<a data-filter="facebook" href="#">facebook</a>
			<a data-filter="instagram" href="#">instagram</a>
			<a data-filter="twitter" href="#">twitter</a>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 naswddsf">
			<div class="row">
				<div class="facebook itemw col-md-6 jes obd">
					facebook post 1
				</div>

				<div class="twitter itemw col-md-6 jes obd">
					twitter post 1
				</div>

				<div class="instagram itemw col-md-6 jes obd">
					instagram post 1
				</div>

				<div class="instagram itemw col-md-6 jes obd">
					instagram post 2
				</div>

				<div class="facebook itemw col-md-6 jes obd">
					facebook post 2
				</div>

				<div class="twitter itemw col-md-6 jes obd">
					twitter post 2
				</div>

				<div class="twitter itemw col-md-6 jes obd">
					twitter post 3
				</div>
				
				<div class="facebook itemw col-md-6 jes obd">
					facebook post 3
				</div>
				
				<div class="instagram itemw col-md-6 jes obd">
					instagram post 3
				</div>
				<div class="twitter itemw col-md-6 jes obd">
					twitter post 4
				</div>
				<div class="twitter itemw col-md-6 jes obd">
					twitter post 5
				</div>
				<div class="facebook itemw col-md-6 jes obd">
					facebook post 4
				</div>
				<div class="facebook itemw col-md-6 jes obd">
					facebook post 5
				</div>
				<div class="instagram itemw col-md-6 jes obd">
					instagram post 4
				</div>

				<div class="vicw">
					<a class="dsawqsda" href="/novinky">
						<div class="nvws">Všechny novinky</div>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>

JavaScript

jQuery( document ).ready(function(){
	jQuery( '[data-filter]' ).on( 'click', function(){
		var itemClass = '.itemw';
		var filterType = jQuery( this ).attr( 'data-filter' ); // mám co chci filtrovat

		// označím si všechny že je chci skrýt
		jQuery( itemClass ).addClass( 'to-hide' );

		if( filterType == 'all' ) {
			// od každýho jedno
			// tohle by chtělo udělat lépe
			
			selectItems( '.facebook', 1 );
			selectItems( '.instagram', 1 );
			selectItems( '.twitter', 1 );
		} else {
			selectItems( `.${filterType}`, 3 );
		}

		// skryju co nechci
		jQuery( `${itemClass}.to-hide:not(.to-view)` ).hide();

		// zobrazím co chci
		jQuery( `${itemClass}.to-view` ).show();

		// odjebu pomocný třídy
		jQuery( itemClass ).removeClass( 'to-hide' );
		jQuery( itemClass ).removeClass( 'to-view' );
	});
});

function selectItems( type = '', count = 0 ) {
	if( count == 0 ) {
		return false;
	}

	let counter = 1;
	jQuery( type ).each(function() {
		jQuery( this ).addClass( 'to-view' );
		
		if( counter == count ) {
			return false;
		}
		
		counter++;
	});
}