afficher du contenu seulement sur click

**laurentSc** · 30/08/2013, 15h54

Bonjour,

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

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) :

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

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

Code html+javascript :

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

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 ?

**laurentSc** · 30/08/2013, 16h20

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

Code html+javascript :

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

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>

**laurentSc** · 30/08/2013, 21h48

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 ?

**NoSmoking** · 31/08/2013, 16h03

Bonjour,
pour éviter toutes mauvaises surprises il est TRES FORTEMENT recommandé de déclarer les variables avec le mot clé var

Code :

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

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 html :

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

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

Autre chose toujours au passage

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 html :

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

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

Envoyé par laurentSc

D'où ça peut venir ?

difficile à dire

**Kaamo** · 31/08/2013, 16h26

Bonjour Laurent,

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

**laurentSc** · 31/08/2013, 22h16

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

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
 <!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>

afficher du contenu seulement sur click

JavaScript

Discussions similaires

Partager

Partager