Discussion :

[dad72]

Bonsoir,

Je souhaiterais savoir comment faire pour que un élément se masque lorsqu'un autre s'affiche ?

En faite l orque on clique sur un lien cela affiche un élément d un tableau <tr> </tr>

Mais si on clic sur un second élément a afficher je voudrais que le premier se masque automatiquement sans avoir besoin de cliquer dessus. en gros je voudrais que seule un seule élément s'affiche en masquant les précédants.

Je vous montre en gros le code que j ai fait jusque la, je ne connait pas trop le javascript, je débute et je trouve pas comment le compléter.

Merci pour votre aide

Code javascript :

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

1
2
3
4
5
6
<script language="JavaScript" type="text/JavaScript"> //afficher/marquer 
function afficher(div) {
	with (document.getElementById(div).style)	
		display = (display == 'none')? '' : 'none';
}
</script>

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
<table border="1" bgcolor="white" width="550" align="center" style="border-collapse: collapse">
	<tr>
		<th colspan="4"><a href="javascript:afficher('z1');" Title="Afficher l'atelier de peinture">Atelier de peinture</a></th>		
	</tr>
	<tr>
		<th><a href="javascript:afficher('z2');">Carrosserie</a></th>
		<th><a href="javascript:afficher('z3');">Par-choc</a></th>
		<th><a href="javascript:afficher('z4');">Prise de toit</a></th>
		<th><a href="javascript:afficher('z5');">Bas de caisse</a></th>
	</tr>
	<tr id="z1" style="display:none;">
		<td>code</td>	
		<td>code</td>
		<td>code</td>		
		<td>code</td>
	</tr>
	<tr id="z2" style="display:none;">
		<td>code</td>
		<td colspan="3"></td>
	</tr>
	<tr id="z3" style="display:none;">
		<td></td>
		<td>code</td>
		<td colspan="2"></td>
	</tr>
	<tr id="z4" style="display:none;">
		<td colspan="2"></td>
		<td>code</td>
		<td></td>
	</tr>	
	<tr id="z5" style="display:none;">
		<td colspan="3"></td>
		<td>code</td>
	</tr>	
</table>

[dad72]

Re,

bas j ai modifier tout le code javascript et j ai réussi a obtenir le résultat souhaiter, mais je doit avouer que c est pas génial ce que j ai fait, je suis sur que il doit y avoir une possibilité de faire çà en moins de ligne de code que ce que j ai fait.

si vous avez mieux a me proposer je serais ravie sinon bas çà fonctionne ce que j ai fait là, je vais donc pas m'en plaindre, mais je suis pas super satisfait.

Code 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function afficher(div) {
var displays = document.getElementById(div).style.display;
if(div == '1') { 
	document.getElementById('1').style.display = '';
	document.getElementById('2').style.display = 'none';
	document.getElementById('3').style.display = 'none';
	document.getElementById('4').style.display = 'none';
	document.getElementById('5').style.display = 'none';
}
if(div == '2') { 
	document.getElementById('1').style.display = 'none';
	document.getElementById('2').style.display = '';
	document.getElementById('3').style.display = 'none';
	document.getElementById('4').style.display = 'none';
	document.getElementById('5').style.display = 'none';
}
if(div == '3') { 
	document.getElementById('1').style.display = 'none';
	document.getElementById('2').style.display = 'none';
	document.getElementById('3').style.display = '';
	document.getElementById('4').style.display = 'none';
	document.getElementById('5').style.display = 'none';
}
if(div == '4') { 
	document.getElementById('1').style.display = 'none';
	document.getElementById('2').style.display = 'none';
	document.getElementById('3').style.display = 'none';
	document.getElementById('4').style.display = '';
	document.getElementById('5').style.display = 'none';
}
if(div == '5') { 
	document.getElementById('1').style.display = 'none';
	document.getElementById('2').style.display = 'none';
	document.getElementById('3').style.display = 'none';
	document.getElementById('4').style.display = 'none';
	document.getElementById('5').style.display = '';
}
}

[Bovino]

Code :

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

1
2
3
4
function afficher(div) {
for(var i=1;i<6;i++){ 
	document.getElementById('i').style.display = div==i?'':none;
}

[dad72]

Merci beaucoup, en effet ce que j ai fait prend trop de ligne de code, je m'en doutais.

Par contre j ai remplacer le code par celui ci et il y avais une petite erreur:

Code :

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

document.getElementById(i).style.display = (div == i)? '' : 'none';

dans la parenthèse du getElementById(i) au lieu de getElementById('i') .Il manquer l'accolade de fermeture de la fonction aussi. Mais ce sont des détaille, cela ma deja beaucoup aider ce code et surtout raccourci ce que j avais fait en second.


resterais bien une dernière petite chose :
comment faire pour que en recliquan sur un élément ouvert, il se referme, car la si on en ouvre 1 on ne peux plus le re masquer, par contre çà fonctionne bien au passage a un autre élément le premier se referme bien.

Comment compéter la fonction s il vous plais ?

Code javascript :

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

1
2
3
4
5
function afficher(div) {
	for(var i = 1; i < 6; i++){ 
		document.getElementById(i).style.display = (div == i)? '' : 'none';		
	}
}

[Bovino]

Effectivement, il y avait ces deux erreurs dans mon code...

Sinon

Code :

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

1
2
3
4
5
function afficher(div) {
	for(var i = 1; i < 6; i++){ 
		document.getElementById(i).style.display = (div == i)? (document.getElementById(i).style.display=='' ? 'none' : '') : 'none';		
	}
}

ou

Code :

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

document.getElementById(i).style.display = (div == i && document.getElementById(i).style.display ='none')? '' : 'none';

[dad72]

Grand merci pour votre aide, çà fonctionne parfaitement bien.

Je résouds donc