Toggle pour cacher/apparaître un élément DOM

Bonjour,

J'utilise une fonction basique pour cacher/afficher un élément du DOM.

Code:

---

1 2 3 4 5 6 7 8 9

<script> $(function() { $( "#calcul").click(function() { $( "#chiffre").toggle('blind');   }); }); </script>

---

J'ai donc un code HTML ressemblant à ça :

Code:

---

<div id="calcul">Nom du calcul</div><div id="chiffre">Mon chiffre</div>

---

J'aimerais améliorer la fonction dans le cas ou j'ai plusieurs div de calcul du style :

Code:

---

1 2 3

<div id="calcul1">Nom du calcul</div><div id="chiffre1">Mon chiffre 1</div> <div id="calcul2">Nom du calcul</div><div id="chiffre2">Mon chiffre 2</div> etc...

---

Je ne sais comment modifier la fonction pour qu'elle récupère le numéro de mes div ? Auriez-vous une solution svp ? Merci

soit tu récupères le chiffre terminal pour utiliser le sélecteur id
soit tu passe par $(this).next() vu la structure que tu utilises, le div cible étant juste après le div déclencheur

Code:

---

1 2 3 4 5 6 7

$(function() { $( "div[id^='calcul']").click(function() { $(this).next().toggle('blind');   }); });

---

Excellent, merci beaucoup, ça fonctionne, je connaissais pas next.

Sait-tu ou je peux trouver de la doc pour ce code ? J'ai un peu de mal à comprendre...

Citation:

---

div[id^='calcul']

---

un petit cheatsheet
http://woorkup.com/wp-content/upload...heet-1.4.2.pdf

en gros ça veut dire :
les div dont l'id commence par calcul

voir le chapitre SELECTORS / 5. ATTRIBUTE de la cheatsheet

Merci bcp.