Menu généré avec DOM dans une div dont le contenu lié apparait dans une autre div
J'ai deux division dans une division global. Chacune de ces divisions sera en float:left dans le CSS.
Dans champsGenere, le menu sera généré par une boucle qui passe les entrées d'un tableau. Jusqu'ici, aucun problème!
Sauf que lorsque je clique sur un cours, j'aimerais que les détails de ce cours apparaisse dans la seconde division (soit coursGenere). Lorsque je choisi un autre cours, les détails changent (ces détails sont aussi généré par ce tableau).
J'arrive à le faire si les détails apparaissent sous le champ du cours plutôt que dans l'autre division.
Peut-être que j'arrive pas à trouver le bon parentNode, nextSibling ou je sais pas trop. Peut-être que ça se fait pas?
Est-ce que quelqu'un sait comment faire?
Merci beaucoup!!!
HTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
| <div id="global">
<div id="champsGenere">
<p>Ateliers d'informatique</p>
</div>
<div id="coursGenere">
<p>Titre du champ d'application</p>
</div>
</div> |
JAVASCRIPT
Code:
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
27
28
29
30
31
32
33
34
35
36
37
38
39
| var derniereListeCours = null;
function afficheChamps()
{
for(i=0; i<champApplications.length; i++)
{
var divNomChamp = document.createElement("div");
divNomChamp.appendChild(document.createTextNode(champApplications[i][0]));
divNomChamp.className = "divNomChamp";
document.getElementById("champsGenere").appendChild(divNomChamp);
divNomChamp.onclick = basculeCours;
for(j=0; j<champApplications[i][1].length; j++)
{
var divGlobal = document.createElement("div");
divGlobal.className = "coursPlace";
document.getElementById("coursGenere").appendChild(divGlobal);
// div à l'intérieur de divGlobal
var titreCours = document.createElement("div");
titreCours.appendChild(document.createTextNode(champApplications[i][1][j].titreCours)) ;
titreCours.className = "courDetail";
divGlobal.appendChild(titreCours);
}
}
}
function basculeCours()
{
if(derniereListeCours!=null) {
derniereListeCours.style.display = "none";
}
var listeCours = this.nextSibling;
listeCours.style.display = (listeCours.style.display=="inline")?"none":"inline";
derniereListeCours = listeCours;
} |
Merci!!!
Isabelle
