Afficher/Masquer un div

Version imprimable

Bonjour,
J’aurais besoin de votre aide.Je souhaite affiché le contenu du div et masqué tous les autres div lorsque je click sur afficher.
Voici le code :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Afficher / Masquer</title>
</head>
<body>
 
	<script>
	function afficher_cacher(id)
	{
   if(document.getElementById(id).style.display == "block"){
		document.getElementById(id).style.display = "none";
		document.getElementById('bouton_'+id).innerHTML='Afficher';
	}
  else{
		document.getElementById(id).style.display = "block";
		document.getElementById('bouton_'+id).innerHTML='Masquer';
	}
}
 
	</script>
 
	<style>
	#texte{
		display:none;		
	}
	#texte1{
		display:none;		
	}
	#texte2{
		display:none;		
	}
	#texte3{
		display:none;		
	}
 
 
	</style>
 
	<div id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher</div>
		<div id="texte">
			<table >
				<td>val 1</td>
				<td>val 2</td>
				<td>val 3</td>
				<td>val 4</td>
			</table>	
		</div>
 
	<div id="bouton_texte" onclick="javascript:afficher_cacher('texte');" >Afficher</div>
		<div id="texte1">
			<table >
				<td>val 1</td>
				<td>val 2</td>
				<td>val 3</td>
				<td>val 4</td>
			</table>
		</div>
 
	<div  id="bouton_texte" onclick="javascript:afficher_cacher('texte');" >Afficher</div>
		<div id="texte2">
			<table >
				<td>val 1</td>
				<td>val 2</td>
				<td>val 3</td>
				<td>val 4</td>
			</table>
		</div>
 
 
	<div  id="bouton_texte" onclick="javascript:afficher_cacher('texte');" >Afficher</div>
		<div id="texte3">
			<table >
				<td>val 1</td>
				<td>val 2</td>
				<td>val 3</td>
				<td>val 4</td>
			</table>
		</div>
 
 
</body>
</html>

Mon souci c'est que lorque je click sur le deuxieme,troisieme ou quatrieme bouton c'est à chaque fois le premier div qui s'affiche et pas celui sur lequel je click.
Je sais pas si mon script est correct.
Merci de votre aide :)

Une chose. Un id doit être unique.

Code:

1
2
	<div id="bouton_texte" onclick="javascript:afficher_cacher('texte');" >Afficher</div>

Code:

1
2
	<div id="bouton_texte2" onclick="javascript:afficher_cacher('texte2');" >Afficher</div>

etc...

08/06/2017, 17h34
Beginner.

Bonjour,

Vous y êtes presque... C'est juste au niveau des id et de l'appel de la fonction onclick="afficher_cacher('texte');" (il faut mettre le bon id en argument, vous vous avez mis à chaque fois "texte"). Et pour la div en tête vous avez mis le même id à chaque fois : id="bouton_texte"...

Voilà vous pouvez tester ici : http://jsbin.com/lowiqexava/edit?html,output (j'ai enlevé "javascript:")
08/06/2017, 17h39
Beginner.

Ah je n'avais pas vu que badaze avait déjà répondu... Il est trop rapide pour moi...
08/06/2017, 20h48
diane621

Le contenu de ma div s'affiche bien lorsque je click dessus. Mais lorsque je click sur une autre div le contenue précédemment cliqué ne se masque pas pour affiché le nouveau contenu.
merci oui en effet un id est unique.
08/06/2017, 21h06
Beginner.

Vous avez essayé le code que j'ai mis ?

Citation:

Envoyé par diane621

Le contenu de ma div s'affiche bien lorsque je click dessus. Mais lorsque je click sur une autre div le contenue précédemment cliqué ne se masque pas pour affiché le nouveau contenu.

Ben pour masquer il faut cliquer sur "masquer" justement ? A moins vous vouliez qu'une seule div soit affichée à la fois ? C'est-à-dire qu'on affiche une div toutes les autres doivent être masquées automatiquement ? Si oui quel serait l’intérêt du "bouton" masquer ?
08/06/2017, 23h06
diane621

Oui j’ai essayé le code.
Oui voilà exactement c’est ce que je veux faire afficher une seule div à la fois.
Le "bouton" masquer c’est pour cacher la div apparent (visible).
08/06/2017, 23h40
Beginner.

Voilà ce que j'ai fait (d’après ce que j'ai compris) : http://jsbin.com/qomuhufoda/edit?html,output

Une interprétation en jquery.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
 // on cache tout
 function cacher() {
  $( "div[id^='text']").hide();
  $( "div[id^='bouton_text']").html('Afficher'); 
 }
 function afficher_cacher(id)
 {
  var curHTML = $( "#bouton_"+id).html();
   
  cacher();
   
  if ( curHTML!= 'Masquer') {
   $( "#"+id).show();
   $( "#bouton_"+id).html('Masquer');
  }
 }
 
 // A la fin du chargement on cache tout
    $( document ).ready(function() {
        cacher();
    });
 </script>  
 <title>Afficher / Masquer</title>
</head>
<body>
 <div id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher</div>
  <div id="texte">
   <table >
    <tr>
    <td>val 1</td>
    <td>val 2</td>
    <td>val 3</td>
    <td>val 4</td>
    </tr>
   </table> 
  </div>
 
 <div id="bouton_texte1" onclick="javascript:afficher_cacher('texte1');" >Afficher</div>
  <div id="texte1">
   <table >
    <tr>
    <td>val 1</td>
    <td>val 2</td>
    <td>val 3</td>
    <td>val 4</td>
    </tr>
   </table>
  </div>
 
 <div  id="bouton_texte2" onclick="javascript:afficher_cacher('texte2');" >Afficher</div>
  <div id="texte2">
   <table >
    <tr>
    <td>val 1</td>
    <td>val 2</td>
    <td>val 3</td>
    <td>val 4</td>
    </tr>
   </table>
  </div>
 
 
 <div  id="bouton_texte3" onclick="javascript:afficher_cacher('texte3');" >Afficher</div>
  <div id="texte3">
   <table >
    <tr>
    <td>val 1</td>
    <td>val 2</td>
    <td>val 3</td>
    <td>val 4</td>
    </tr>
   </table>
  </div>
 
 
</body>
</html>

09/06/2017, 09h48
diane621

Merci badaze !! :D
12/06/2017, 13h52
NoSmoking
Bonjour,
@badaze :

Citation:

Une interprétation en jquery.

cela peux également se faire simplement en javascript « vanilla » voire même en pure CSS, ceci étant on trouve dans ton code des horribles

Code:

<div id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher</div>

et comme d'autre part tu utilises
Code:

1 2 3 $( document ).ready(function() { cacher(); });
autant faire l’initialisation des événements à ce moment
Code:

1 2 3 4 5 6 7 $(document).ready(function () { cacher(); $('div[id^=bouton]').on('click', function(){ var ref = this.id.split('_')[1]; afficher_cacher( ref); }); });
12/06/2017, 18h06
badaze
Citation:

Envoyé par NoSmoking

Bonjour,
@badaze :cela peux également se faire simplement en javascript « vanilla » voire même en pure CSS, ceci étant on trouve dans ton code des horribles

Code:

<div id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher</div>

J'ai repris le code qui avait été posté.
Citation:
Envoyé par NoSmoking

et comme d'autre part tu utilises

Code:

1 2 3 $( document ).ready(function() { cacher(); });

autant faire l’initialisation des événements à ce moment

Code:

1 2 3 4 5 6 7 $(document).ready(function () { cacher(); $('div[id^=bouton]').on('click', function(){ var ref = this.id.split('_')[1]; afficher_cacher( ref); }); });
Oui. Effectivement.