Bonjour,

Je souhaiterais utiliser plusieurs show/hide sans devoir tous les nommé un à un

Voici mon code actuel :

$(document).ready(function(){
  $("#content").hide();
  $("#show_content").show();
                
  $('#show_content').click(function(){              
     $("#content").slideToggle();
  });     
});

<a id="show_content" />Mon Lien</a>
<div id="content" /> Mon contenu </div>

Donc en théorie ça fonctionne bien, mais si je souhaite utilisé plusieurs fois cette fonction je dois les nommé un à un et c'est vite moche.

<a id="show_content2" />Mon Lien2</a>
<div id="content2" /> Mon contenu2 </div>
<a id="show_content3" />Mon Lien3</a>
<div id="content3" /> Mon contenu3 </div>
<a id="show_content4" />Mon Lien4</a>
<div id="content4" /> Mon contenu4 </div>
<a id="show_content5" />Mon Lien5</a>
<div id="content5" /> Mon contenu5 </div>
........

J'ai entendu parler du .this avec les parents, je suis un peu perdu.

Merci de votre aide.

Salut, t'as qu'à donner une classe à tes liens au lieu des id.

Tudevrais aussi mettre les liens et les div "content" correspondants dans un même div.

Ensuite en jquery tu regarde si on clique sur un élément de la classe que tu as définit, et là tu pourra utiliser "this" et recherché le div content associé pour le montrer.

salut, oui il faut utiliser this et parent

comme ça : 

<style>
	p{
		display: none;
	}
	h2{
		cursor: pointer;
	}
</style>
<script>
	$(document).ready(function(){
		$(document).on("click", "h2", function(){
			var art = $(this).parent('div').find('p');  
			if (art.is(':hidden')){ 			//si l'article cliqué est caché.
				art.slideDown();				//on déplie l'ariticle cliqué.
			}
			else{
				art.slideUp();					//on remonte l'article cliqué.
			}
		});
	});
</script>
<div>
	<h2>Mon lien 1</h2>
	<p>Mon contenu1 <br />Mon contenu1 <br />Mon contenu1 <br />Mon contenu1 <br />Mon contenu1 <br />Mon contenu1 <br />Mon contenu1 <br /></p>
	<hr />
</div>
<div>
	<h2>Mon lien 2</h2>
	<p>Mon contenu2 <br />Mon contenu2 <br />Mon contenu2 <br />Mon contenu2 <br />Mon contenu2 <br />Mon contenu2 <br />Mon contenu2 <br /></p>
	<hr />
</div>
<div>
	<h2>Mon lien 3</h2>
	<p>Mon contenu3 <br />Mon contenu3 <br />Mon contenu3 <br />Mon contenu3 <br />Mon contenu3 <br />Mon contenu3 <br />Mon contenu3 <br /></p>
	<hr />
</div>