Afficher/Masquer un div

**diane621** · 08/06/2017, 14h05

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 :

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

**badaze** · 08/06/2017, 17h20

Une chose. Un id doit être unique.

Code :

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

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

Code :

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

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

etc...

**Beginner.** · 08/06/2017, 17h34

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

**Beginner.** · 08/06/2017, 17h39

Ah je n'avais pas vu que badaze avait déjà répondu... Il est trop rapide pour moi...

**diane621** · 08/06/2017, 20h48

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.

**Beginner.** · 08/06/2017, 21h06

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

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 ?

**diane621** · 08/06/2017, 23h06

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

**Beginner.** · 08/06/2017, 23h40

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

**badaze** · 09/06/2017, 00h21

Une interprétation en jquery.

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

**diane621** · 09/06/2017, 09h48

Merci badaze !!

**NoSmoking** · 12/06/2017, 13h52

Bonjour,
@badaze :

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

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

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

et comme d'autre part tu utilises

Code :

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

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

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

Code :

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

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);
  });
});

**badaze** · 12/06/2017, 18h06

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

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

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

J'ai repris le code qui avait été posté.

Envoyé par NoSmoking

et comme d'autre part tu utilises

Code :

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

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

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

Code :

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

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.

Afficher/Masquer un div

JavaScript

Discussions similaires

Partager

Partager