Bonjour,

Je suis à la recherche d'aide sur le code suivant. Tout d'abord la situation qui fonctionne, j'ajoute ce code html et javascript dynamiquement :

html :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="char">
   <div id="G1" name="charGroup" class="skills" ><div class="text">blabla</div></div>
   <div id="G1_content" class="skills" >
   	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book5"><div class="level5"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
   </div>
   <div id="G2" name="charGroup" class="skills" ><div class="text">blabla</div></div>
   <div id="G2_content" class="skills" >
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book5"><div class="level5"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
   </div>
   <div id="G3" name="charGroup" class="skills" ><div class="text">blabla</div></div>
   <div id="G3_content" class="skills" >
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book5"><div class="level5"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
   </div>
   <div id="G4" name="charGroup" class="skills" ><div class="text">blabla</div></div>
   <div id="G4_content" class="skills" >
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book5"><div class="level5"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
   </div>
</div>
javascript associé :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
$("#G1").toggle(function () { $("#G1_content").show(); return false; },
                function () { $("#G1_content").hide();  return false; });
$("#G1_content").hide();
$("#G2").toggle(function () { $("#G2_content").show(); return false; },
                function () { $("#G2_content").hide();  return false; });
$("#G2_content").hide();
$("#G3").toggle(function () { $("#G3_content").show(); return false; },
                function () { $("#G3_content").hide();  return false; });
$("#G3_content").hide();
$("#G4").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G4_content").hide();
$('#char').load('a.html', function() {});
tout se passe bien, mais si je le fais avec une boucle for :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
var allElements = document.getElementsByName("charGroup");
for (var i=0; i < allElements.length; i++) {
   var el ="#"+allElements[i].id;
   var elc ="#"+allElements[i].id+"_content";
   $(el).toggle(function () { $(elc).show(); return false; },
                    function () { $(elc).hide();  return false; });
   $(elc).hide();
}
$('#char').load('a.html', function() {});
J'obtiens un comportement equivalent à ce code :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
$("#G1").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G1_content").hide();
$("#G2").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G2_content").hide();
$("#G3").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G3_content").hide();
$("#G4").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G4_content").hide();
Toutes mes entêtes toggle le dernier content (dans le cas présent G4_content)...

Au secour!