[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 :

CODEBLOCK1

[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 :

CODEBLOCK2

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 :

CODEBLOCK0

en HTML :

CODEBLOCK1

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...