Viser un seul élément en jQuery

Petit mémo jQuery pour rappeler la fonction permettant d’afficher ou cacher un élément dont la classe se répète plusieurs fois dans la page..En général, si l’on colle le code suivant :

jQuery(document).ready(function(){

    

jQuery('.event-image-link').click(function(){

   

    jQuery('.event-image').toggleClass('hide');

});    

  

});

dans un bloc, on une div vide ou un lien, dont la classe est .event-image-link, juste en dessous, une div avec du contenu, avec la classe .event-image, à laquelle on ajoute la classe hide{display:none}.Ce bloc se répète plusieurs fois dans la page, a la manière d’articles sur un blog.

Au clic sur la div event-image-link, toutes les div de la page contenant la classe .event-image vont s’ouvrir.

Pour éviter ca, voici le code:

jQuery(document).ready(function(){

    

jQuery('.event-image-link').click(function(){

   

    jQuery(this).siblings('.event-image').toggleClass('hide');

});    

  

});

On cible précisement la div suivant celle que l’on a cliqué.

Selon votre structure html, on pourra aussi utiliser .next()  à la place de siblings

exemple:

jQuery(document).ready(function(){

           jQuery('.archive_date').click(function(){

           jQuery(this).next('.archive-content').toggleClass('hide');

               

        });

        });