[Résolu] Mon toggle ne marche que sur ma première occurence

Bonjour,
Je débute en Jquery. Actuellement, je suis en train de coder une page dont le principe est d'avoir une image de fond sur laquelle des légendes sont cliquables.
Lorsqu’on clique sur une légende, le détail apparaît dans une petite fenêtre.
Lorsqu’on clique sur cette fenêtre, elle disparaît.

Pour ce faire, en Jquery, j'ai créé 2 variables : 1 pour la légende et une pour les détails. Ensuite, je leur affecte la fonction Toggle().
J'ai utilisé des identifiants pour la précision et la rapidité.

Tout fonctionne bien pour le premier bloc de la page, mais rien ne se passe pour les suivants. Je ne comprends pas trop pourquoi. J'ai dû faire une erreur et je ne vois pas laquelle (vu que je débute et que je n'ai pas encore tout bien assimilé).
Si quelqu'un a une idée, je suis preneuse.
Ci-dessous mon code.
Merci d'avance.

Code HTML
Dans le head :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Dans le body :

<div id="main" class="container">
	<div class="img-legendee">
    	<div class="content">
			<img src="lande.jpg" class="the-image" style="width:100%">
            
        	<div class="legende" data-x="20" data-y="40" style="left: 20%; top: 40%; z-index: 2;">
             	 <div id="ouverture" class="la-legende">La forêt [ + ]</div>
             	 <div id="detail" class="detail">
                     <img src="fermer.png" width="36" height="36" alt="fermer" class="fermer">
                     Elle abrite de nombreuses espèces, notamment le pic noir.
                 </div>
          	</div>
                          
         	 <div class="legende" data-x="31" data-y="56" style="left: 31%; top: 56%; z-index: 2;">
            	 <div id="ouverture" class="la-legende">La tourbière [ + ]</div>
             	 <div id="detail" class="detail">
                 	<img src="fermer.png" width="36" height="36" alt="fermer" class="fermer">
                    Ce milieu très fragile est le résultat de l'accumulation progressive de végétaux, peu ou pas décomposés.
                 </div>
        </div>
/div><!--fin the content-->
</div><!--fin img-legendee-->
</div><!--fin main-->


[code=javascript]  <script>
    var $ouverture = $('#ouverture');
  	var $detail = $('#detail');
	
  	$ouverture.on('click',function(){
		$(this).next().toggle(500);
		}
	);
	
  	$detail.on('click',function(){
		$(this).toggle(500);
		}
	);	
  </script>

[/code]

Le code CSS des éléments concernés :

.legende {/*bloc de la légende et du détail*/
	position:absolute;
	z-index:2;
}
.la-legende {/*légende sur laquelle on clique pour lire le détail*/
	background: #333;
	color: #fff;
	border:4px solid #ffffff;
	padding: 4px 9px;
    transition: all 0.4s ease-out;
	opacity:1;
	cursor:pointer;
	top:-16px;
	left:16px;
	position:relative;
}
.detail {/*détail dans le pavé rectangulaire */
	position:absolute;
	display:none;
	width:600px;
	background-color:#fff;
	border:5px solid #666;
	padding: 10px;
	bottom:80px;
	z-index:3;
	}
.fermer{/*positionnement de la croix pour fermer le détail*/
	position:relative;
	top:-20px;
	float:right;
	right:-20px;
}

Modifié par codewriter (21 Sep 2017 - 14:58)

Quelle rapidité !
Merci AkaiKen !
C'est super, ça marche avec les classes. Et c'est plus logique.

Là où je m'y perds, c'est qu'en formation, on a fait un exercice similaire pour afficher/cacher des paragraphes sous un sous-titre et on a utilisé des id (uniques donc) et ça fonctionne pour tous les sous-titres et tous les paragraphes.
Merci encore et bonne journée.

Ah, tu m'intrigues avec ton exercice de formation : pourrais-tu le retrouver ?

(et bonne continuation )

Le voici :
Le formateur nous a fait mettre un id sur le div qui contient les paragraphes et sur le H1. Je 'nais compris pourquoi sur le H1 , vu qu'on ne l'utilise plus après.
Ensuite, on a le h2, qui n'a pas de id ni de classe affectés. Ce qui me perds un peu, parce qu'il a bien insisté sur la précision et la rapidité d'accès. mais comme je le disais plus haut, je n'ai as encore tout assimilé. Il y a des subtilités qui m'échappent encore.

Après appel à la bibliothèque dans le head, en CSS :

#site{
	width:500px;
	margin: 0 auto;
}
#site span{display:none;	}
h2{ 
	color:#fff;
	width:100%;
	text-align:center;
	margin-bottom: 10px;
	text-transform:uppercase;
	background-color: #9C9;
	cursor: pointer;
}

en HTML :

<div id="site">
	<h1 id="titre">Mon titre</h1>
	<h2>sous-titre 1</h2>
	<span><!--on met le paragraphe dans un span-->
	<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>
	</span>
    <br />
		<h2>sous-titre 2</h2>
	<span>
	<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>
	</span>	
    <br />
	<h2>sous-titre 3</h2>
	<span>
	<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>
	</span>	
    <br />
	<h2>sous-titre 4</h2>
	<span>
	<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>
	</span>
</div>
    <script>
var $head2 = $('#site h2');	

$head2.on('click', function() {
	$(this).next().toggle(500);
});
</script>

var $head2 = $('#site h2');

Aaaah, je l'avais préssenti : l'ID est sur un élément parent.

Si j'ai bien compris, l'id sert à sélectionner seulement les h2 qui se trouvent dans ce bloc, pas les autres h2 de la page.

Mais pour sélectionner plusieurs éléments du DOM qui doivent avoir le même comportement, on préfère mettre des classes dessus.
C'est bien ça ?

Tout à fait

Et merci à tous les deux pour vos lumières.
Je commence à y voir plus clair.
J'ai encore du boulot avant de maîtriser...