Des fois, on a besoin d’afficher à l’utilisateur que certaine information.

Pour cela, il existe plusieurs méthodes (faire des pages spécifiques, ajax etc.), nous on va voir une façon simple qui se base simplement sur cacher ou non tel ou tel élément.

Cette solution, est utile quand il n’y a pas beaucoup d’élément ,car on charge tout dans la page pour ensuite cacher les éléments en jQuery. Si vous voulez faire un système de filtre pour énormément d’élément, il faudra alors se tourner vers de l’ajax afin de charger dans la page uniquement les bonnes informations.

On commence avec la structure html

<!-- les éléments a affiché -->
<div id="elements">
	<div class="video"></div>
	<div class="video"></div>
	<div class="video"></div>

	<div class="audio"></div>

	<div class="texte audio"></div>
	<div class="texte"></div>
	<div class="texte"></div>
	<div class="texte"></div>
</div>

<!-- les filtres -->
<div id="filtres">
	<ul>
		<li class="filter active" data-filter="all">Tout</li>
		<li class="filter" data-filter="video">Videos</li>
		<li class="filter" data-filter="audio">Audios</li>
		<li class="filter" data-filter="texte">Textes</li>
	</ul>
</div>

Ici, la structure est très simple et par défaut tout est affiché.

On continue avec le script de filtre

$('#filtres li').click(function(){
	// on recupère la valeur du filtre
	value = $(this).data('filter');
	// on enlève la classe active de l'ancien élément
	$('#filtres li').removeClass('active'),
	// on ajoute la classe active sur l'élément cliqué
	$(this).addClass('active');

	// pour chaque div 
	$('#elements div').each(function(){
		el = $(this);
		// on montre tout
		el.show();
		// on teste si l'élément n'a pas la classe du filtre ou que l'utilisateur ne souhaite pas tout affiché
		if(!el.hasClass(value) && value != "all" )
			el.hide(); // on cache les éléments qu'on ne souhaite pas voir

	});
});

Explications :

– ligne 3 : .data() permet de récupérer la data qui a pour nom filter
– ligne 15 : on vérifie si l’élément n’a pas la classe sélectionné par le filtre et si on ne souhaite pas tout afficher

Le principe est simple, à chaque clique sur un filtre, on affiche tout pour ensuite cacher uniquement les informations qu’on ne souhaite pas !
Pour savoir sur quel filtre on a cliqué, on lui ajoute une classe active afin de pouvoir le différencier en css.