Discussion :

[Thib0ult]

Bonjour,

Voici mon travail actuel:
j'ai 4 choix avec 1 définition associé a chacun. Quand je clique sur l'un, une div apparait contenant une definition(display: block). je veux que le choix cliqués changent de couleur ainsi que sa définition associée, et que si l'on reclique dessus, il repasse en noir (et la div se replie).
Pour ne pas rallonger mon code, j'aimerais capturer l'id ou la fonction est appelée pour pouvoir colorer chaque choix cliqués ainsi que sa def.

Pour le moment, j'ai réussi a le faire pour seulement le clic du 1er choix, en utilisant JS. (je pense que ca sera plus court que d'utiliser du CSS en fonction de chaque situation?)
html:

Code html :

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
27
28
29
30
31
32
 <a>definition of:</a> <!-- we display definition of choices if clic on it--> 
<span class="bouton" id="bouton_texte1" onclick="javascript:afficher_cacher('definition1');" onmouseover="this.style.cursor='pointer'">choix1</span>
<span class="bouton" id="bouton_texte2" onclick="javascript:afficher_cacher('definition2');" onmouseover="this.style.cursor='pointer'">choix2</span>
<span class="bouton" id="bouton_texte3" onclick="javascript:afficher_cacher('definition3');" onmouseover="this.style.cursor='pointer'">choix3</span>
<span class="bouton" id="bouton_texte4" onclick="javascript:afficher_cacher('definition4');" onmouseover="this.style.cursor='pointer'">choix4/span>
 
    <div id="definition1" class="definition" style="display:none"></br>
 
      blabla1      
    </div>
 
 
 
    <div id="definition2" class="definition" style="display:none"></br>
 
       blabla2      
    </div>
 
 
 
    <div id="definition3" class="definition" style="display:none"></br>
 
        bla bla bla 3      
    </div>
 
 
 
 
    <div id="definition4" class="definition" style="display:none"></br>
 
     Bla bla 4      
    </div>

et le JS associé:

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
function afficher_cacher(id) /* if click on choix1, choix2..., display his definition*/
{
  var elmt = document.getElementById("bouton_texte1");
 
    if(document.getElementById(id).style.display=="none")
 
    {
        document.getElementById(id).style.display="block";      
 
// change color
elmt.style.color = "#0000FF";   
 
    }
    else
    {
      elmt.style.color = "#000000";
document.getElementById(id).style.display="none";
 
 
    }
    return true;
}

donc, a la place de bouton_texte1, j'aimerais mettre quelque chose qui ressemble a this.id ou this.getelementbyid, ou encore element.id car pour le moment, bouton_texte1 correspond à l'id du choix1 mais pas des autres choix. je veux donc récupérer a sa place l'id courant.

any id ? ^^

[mathieu]

cela peut se faire en passant simplement le numéro par l'argument de la fonction :
http://jsbin.com/hucodisixe/1/edit?html,js,output

[NoSmoking]

Bonjour,

onclick="javascript:afficher_cacher('definition1');"

inutile de mentionner javascript, l'événement onclick attend une action javascript.

onmouseover="this.style.cursor='pointer'"

autant passer par le CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.bouton {
  cursor:pointer;
}

Sinon pour le principe il est souvent fait appel/utilisé un attribut data-xxx pour faire le lien entre les éléments

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul>
    <li class="bouton" data-lien="def_1" onclick="affiche(this)">Définition #1</li>
    <li class="bouton" data-lien="def_2" onclick="affiche(this)">Définition #2</li>
    <!-- la suite -->
</ul>

avec une fonction d'affichage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function affiche( obj){
    var id = obj.dataset.lien;
    var oElem = document.getElementById(id);
    // la suite du code qui peut être simplifiée
}

[Thib0ult]

merci pour vos remarques
Voici le code final fonctionnel:

Code html :

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
27
28
29
30
31
32
33
34
35
36
<a>definition of:</a> <!-- we display definition of KPI if clic on it--> 
<span class="bouton" id="bouton_texte1" onclick="afficher_cacher('1');">choix1</span>
<span class="bouton" id="bouton_texte2" onclick="afficher_cacher('2');">choix2</span>
<span class="bouton" id="bouton_texte3" onclick="afficher_cacher('3');">choix3</span>
<span class="bouton" id="bouton_texte4" onclick="afficher_cacher('4');">choix4</span>
 
    <div id="definition1" class="definition" style="display:none"></br>
<fieldset id="field_set1">      
bla bla 1
</fieldset>       
    </div>
 
 
 
    <div id="definition2" class="definition" style="display:none"></br>
   <fieldset id="field_set2">   
     bla bla2
  </fieldset>    
    </div>
 
 
 
    <div id="definition3" class="definition" style="display:none"></br>
     <fieldset id="field_set3"> 
    blabla3
      </fieldset>
    </div>
 
 
 
 
    <div id="definition4" class="definition" style="display:none"></br>
      <fieldset id="field_set4">
      blabla4
      </fieldset>
    </div>

CSS:

Code css :

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
#field_set1{
    border-color:#0000FF;
    border-style: solid;
}
#field_set2{
    border-color:#7FFF00;
    border-style: solid;
}
#field_set3{
    border-color:#66CDAA;
    border-style: solid;
}
#field_set4{
    border-color:#FF4500;
    border-style: solid;
}
 
.bouton {
  cursor:pointer;
}

JS:

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
27
28
29
30
31
32
33
34
35
36
37
function afficher_cacher(id)
{
	var elmt = document.getElementById("bouton_texte" + id);
	var def = document.getElementById("definition" + id);
 
	if(def.style.display=="none")
	{
      if(id==1)
        {
		elmt.style.color = "#0000FF";
		def.style.display = "block";
          }
      if(id==2)
        {
		elmt.style.color = "#7FFF00";
		def.style.display = "block";
          }
      if(id==3)
        {
		elmt.style.color = "#66CDAA";
		def.style.display = "block";
          }
      if(id==4)
        {
		elmt.style.color = "#FF4500";
		def.style.display = "block";
          }
	}
	else
	{
		elmt.style.color = "#000000";
		def.style.display = "none";
	}
 
	return true;
 
}

merci et bonne journée !

[sekaijin]

beacoup plus simple et moins gourmand en temps d'exécution (pas de getByID répétitif pas de if inutiles etc.

Code html :

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
27
28
29
30
31
32
33
34
35
36
<a>definition of:</a> <!-- we display definition of KPI if clic on it--> 
<span class="bouton" data-color="#0000FF" id="bouton_texte1">choix1</span>
<span class="bouton" data-color="#7FFF00" id="bouton_texte2">choix2</span>
<span class="bouton" data-color="#66CDAA" id="bouton_texte3">choix3</span>
<span class="bouton" data-color="#FF4500" id="bouton_texte4">choix4</span>
 
    <div id="definition1" class="definition" style="display:none"></br>
<fieldset id="field_set1">      
bla bla 1
</fieldset>       
    </div>
 
 
 
    <div id="definition2" class="definition" style="display:none"></br>
   <fieldset id="field_set2">   
     bla bla2
  </fieldset>    
    </div>
 
 
 
    <div id="definition3" class="definition" style="display:none"></br>
     <fieldset id="field_set3"> 
    blabla3
      </fieldset>
    </div>
 
 
 
 
    <div id="definition4" class="definition" style="display:none"></br>
      <fieldset id="field_set4">
      blabla4
      </fieldset>
    </div>

CSS:

Code css :

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
#field_set1{
    border-color:#0000FF;
    border-style: solid;
}
#field_set2{
    border-color:#7FFF00;
    border-style: solid;
}
#field_set3{
    border-color:#66CDAA;
    border-style: solid;
}
#field_set4{
    border-color:#FF4500;
    border-style: solid;
}
 
.bouton {
  cursor:pointer;
}

JS: à exécuter au onload (après la création du 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
//on initialise tout et on associe les fonctions click en une fois
//on fait donc les getById qu'une fois.
for(var i=1; i<5; i++) {
  //on récupère le bouton et la definition à associer
  var btn = document.getElementById("bouton_texte" + i);
  var def = document.getElementById("definition" + i);
 
  btn.setAttribute('data-def', def);// associer le bouton et la définition
 
  btn.onclick = function() {//la fonction est simple pour tous les bouton
    if(this.dataset.def.style.display=="none")//si la definition est cachée
    {
      this.style.color = dataset.color;//on remets la couleur au bouton
      this.dataset.def.style.display = "block";//on affiche la définition
    } else {
      this.style.color = "#000000";//on met le bouton en noir
      this.dataset.def.style.display = "none";//on cache la definition
    }
    return true;
  }
 
}

[danielhagnoul]

beacoup plus simple et moins gourmand en temps d'exécution (pas de getByID répétitif pas de if inutiles etc.

[...]

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
//on initialise tout et on associe les fonctions click en une fois
//on fait donc les getById qu'une fois.
for(var i=1; i<5; i++) {
  //on récupère le bouton et la definition à associer
  var btn = document.getElementById("bouton_texte" + i);
  var def = document.getElementById("definition" + i);
 
  btn.setAttribute('data-def', def);// associer le bouton et la définition
 
  btn.onclick = function() {//la fonction est simple pour tous les bouton
    if(this.dataset.def.style.display=="none")//si la definition est cachée
    {
      this.style.color = dataset.color;//on remets la couleur au bouton
      this.dataset.def.style.display = "block";//on affiche la définition
    } else {
      this.style.color = "#000000";//on met le bouton en noir
      this.dataset.def.style.display = "none";//on cache la definition
    }
    return true;
  }
 
}

this.dataset.def.style est undefined !

[sekaijin]

sorry j'ai été trop vite
j'ai oublié que les data-xxx ne contenaient que du texte

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
//on initialise tout et on associe les fonctions click en une fois
//on fait donc les getById qu'une fois.
for(var i=1; i<5; i++) {
  //on récupère le bouton et la definition à associer
  var btn = document.getElementById("bouton_texte" + i);
  var def = document.getElementById("definition" + i);
 
  btn.def = def;// associer le bouton et la définition
 
  btn.onclick = function() {//la fonction est simple pour tous les bouton
    if(this.def.style.display=="none")//si la definition est cachée
    {
      this.style.color = this.dataset.color;//on remets la couleur au bouton
      this.def.style.display = "block";//on affiche la définition
    } else {
      this.style.color = "#000000";//on met le bouton en noir
      this.def.style.display = "none";//on cache la definition
    }
    return true;
  }
 
}

pour expliquer le fonctionement on associe au bouton tout ce dont il a besoin
une couleur via data-color et une référence à sa définition via btn.def = def;// associer le bouton et la définition. et on défini la méthode directement sur le bouton pour avoir accès à tous ces éléments.

A+jyt