afficher du contenu seulement sur click

Version imprimable

Bonjour,

ce que je voudrais : on a une liste d'items ; comme ça :

Citation:

User Centric
OCP Processes
Function Skills
Transverse Activities
Offer Creation Academy

et si l'on clique sur l'un d'eux, ça affiche dessous du texte (qu'on peut ensuite réduire) ; comme ça (pour le 1er item) :

Citation:

User Centric
' 'test
OCP Processes
Function Skills
Transverse Activities
Offer Creation Academy

Voilà ce que j'ai tenté (et qui ne marche pas !) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript"> function expandtest(){ targetElement="test"; Item = document.getElementById(targetElement); Item.style.display=(Item.offsetWidth == 0)?block:none; } </script> ... <div><a href="#" onclick="expandtest">User Centric</a> <div id="test" style={display:none;}>test</div> </div> <div>OCP Processes</div> <div>Function Skills</div> <div>Transverse Activities</div> <div>Offer Creation Academy</div>
Comment faire marcher ça ?

Ca y est ; ça marche (j'étais pas loin) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <script type="text/javascript">
function expandtest(){
  targetElement="test";
  Item = document.getElementById(targetElement); 
  Item.style.display=(Item.offsetWidth == 0)?"block":"none"; 
}
</script>
...
    <div><a href="#" onclick="expandtest">User Centric</a>
      <div id="test" style={display:none;}>test</div>
    </div>
    <div>OCP Processes</div>
    <div>Function Skills</div>
    <div>Transverse Activities</div>
    <div>Offer Creation Academy</div>

30/08/2013, 21h48
laurentSc

Je réessaye exactement le même code ce soir, et il marche plus :(.
En commentant, j'ai vu que c'est la ligne 5 qui provoque le message "erreur sur la page".
D'où ça peut venir ?
31/08/2013, 16h03
NoSmoking
Bonjour,
pour éviter toutes mauvaises surprises il est TRES FORTEMENT recommandé de déclarer les variables avec le mot clé var
Code:

1 2 3 4 5 function expandtest(){ var targetElement="test"; var Item = document.getElementById(targetElement); Item.style.display=(Item.offsetWidth == 0)?"block":"none"; }
Une question au passage, tu sors d'où la déclaration du style inline comme celle ci

Code:

<div id="test" style={display:none;}>test</div>

Autre chose toujours au passage

Citation:

Envoyé par laurentSc

Ca y est ; ça marche (j'étais pas loin) :

même avec cette façon de déclarer l'action sur le onclick...

Code:

<div><a href="#" onclick="expandtest">User Centric</a>

Citation:

Envoyé par laurentSc

D'où ça peut venir ?

difficile à dire :mrgreen:
31/08/2013, 16h26
Kaamo

Bonjour Laurent,

Pour l'utilité du mot var, je t'invite à lire ceci

Merci pour vos remarques, et cette fois, c'est bon :ccool:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <!DOCTYPE html>
 <html>
 <head>
 <script type="text/javascript">
function expandtest(){
  var targetElement="test";
  var Item = document.getElementById(targetElement); 
  Item.style.display=(Item.offsetWidth == 0)?"block":"none"; 
}
</script>
</head>
<body>
    <div><a href="#" onclick="expandtest()">User Centric</a>
      <div id="test" style="display:none;">test</div>
    </div>
    <div>OCP Processes</div>
    <div>Function Skills</div>
    <div>Transverse Activities</div>
    <div>Offer Creation Academy</div>
	</body>
	</html>