Bonjour à tous,

je vous remercie d'avance pour l'aide que vous pourrez m'apporter , et aussi pour avoir pris la peine de me lire.

Je débute en javascript/php, et je viens de tester une fonction jquery qui consiste à afficher une DIV cachée.

DANS LE HEAD
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script>
         $(document).ready(function(){
             $('#show').click(function() {
               $('.cachecache').toggle("slide");
             });
         });
    </script>

DANS LE BODY
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
			echo'
			<div id="show">
			<li>
			<b>&nbsp;'.$mot.' </b>
			</li>
			</div>
			<div class="cachecache" style="display: none;">
			'.$definition.'<br />
			'.$exemple.'<br />
			</div>
			';


ça fonctionne très bien, lorsqu'il y a une seule donnée.

Concrètement, il s'agit d'un dictionnaire, qui affiche la définition et son exemple lorsque l'on clique sur le mot.

Je souhaite l'intégrer dans une boucle et récupéré mes données dans la BDD mysql
en faisant cela, logiquement tous les mots sont dans une DIV avec id="show", et toutes les définitions et exemple sont dans une div de class="cachecache"


Résultat :
Seul le premier mot est cliquable et tout se développe.


Ce que je souhaite faire :
Ne faire apparaitre que la définition et l'exemple du mot.

Avez vous des pistes ?
je suis un peu perdu, car je ne comprends pas pourquoi seul le premier mot déclenche l'action (techniquement tous les mots devraient déclencher le développement ?
et je n'ai pas d'idée pour identifier différement chaque mot, tout en gardant le script contenu dans le head.

Merci d'avance pour votre aide.

Eric