Afficher / cacher des Div

**Dae_mon** · 28/03/2013, 20h40

Bonsoir à tous.

Suite à la modification du code pour son amélioration,mon principe d'afficher et cacher mes divs ne fonctionne plus.

Le principe ici est qu'une seul DIV ne peut être visible à la fois.

Voici les codes de mon repertoire test:

Fichier index.php:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
	<!-- Titre de la page -->
		<title>Test</title>
 
	<!-- Codage de la page en utf-8 -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
	<!-- Langue de la page -->
		<meta http-equiv="Content-Language" content="fr-FR"/>
 
	<!-- Inclure le CSS dans la page html -->	
		<link rel="stylesheet" media="screen" type="text/css" href="css/style.css"/>
 
	<!-- Inclure le Code Java jquery dans la page html -->	
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
 
 
<!-- Permet le hide / show des réalisations -->
 
	<script type="text/javascript">
 
	$(document).ready(function() 
		{
		  $(".hide").hide();
 
		  $(".lienvisible").click(function() 
			{
			 $(this).nextAll('.hide').eq(0).slideToggle('slow')
			.siblings('.hide:visible').slideUp('slow');
			});
 
		});
 
	</script>
 
</head>
 
<body>
 
<p>------------------------------------------</p>
 
<?php 
function include_all_php($folder){
    foreach (glob("{$folder}/*.php") as $filename)
    {
        include $filename;
    }
}
 
include_all_php("projetsA");
?>
 
<p>------------------------------------------</p>
 
</body>
 
</html>

Dans le répertoire projetsA, j'ai plusieurs fichiers php dont voici un exemple:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div>
 
<h1 class="lienvisible"> Title 1 </h1>
 
<div class="hide">
<p> 
Test projet 1A
</p> 
</div>
</div>

Le principe est quand on clique sur un h1, il fait apparaitre la 1er DIV suivante ayant une classe Hide.

Dans la modification de code, la ligne avec siblings ne fonctionne plus car ce n'est plus un frère ni un parent. J'ai en effet ajouter des balises DIV dans chaque fichier de projet car je vais réaliser un filtrage des projets.

Je dois trouver le bout de code qui permet de cibler les autres DIV.

Je ne sais pas si je suis suffisament claire...

**danielhagnoul** · 28/03/2013, 21h42

Bonsoir

Code :

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

1
2
3
4
$( ".lienvisible" ).on( "click", function(){
    $( ".hide" ).slideUp( "slow" );
    $( this ).nextAll( '.hide' ).eq( 0 ).slideToggle( 'slow' );
});

**Dae_mon** · 29/03/2013, 11h01

Le code fonctionne.

Merci beaucoup.

Je n'aurais pas trouvé tout seul...

**Dae_mon** · 29/03/2013, 14h20

Bonjour,

Je n'avais pas vu tout à l'heure mais j'aimerai que l'on puisse également fermer les divs.

Donc on peut ouvrir et fermer les div et elles ne sont visibles qu'une à une.

**Dae_mon** · 31/03/2013, 10h31

Bonjour à tous et bonne fêtes de Paques.

Mon problème n'est toujours pas totalement résolu:

Voici mon code de base:

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
85
86
87
88
89
90
91
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
	<!-- Titre de la page -->
		<title>Test</title>
 
	<!-- Codage de la page en utf-8 -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
	<!-- Langue de la page -->
		<meta http-equiv="Content-Language" content="fr-FR"/>
 
	<!-- Inclure le CSS dans la page html -->	
		<link rel="stylesheet" media="screen" type="text/css" href="css/style.css"/>
 
	<!-- Inclure le Code Java jquery dans la page html -->	
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
 
 
<!-- Permet le hide / show des réalisations -->
 
	<script type="text/javascript">
 
	$(document).ready(function() 
		{
		  $(".hide").hide();
 
		  $(".lienvisible").click(function() 
			{
			 $(this).nextAll('.hide').eq(0).slideToggle('slow')
			.siblings('.hide:visible').slideUp('slow');
			});
 
		});
 
	</script>
 
</head>
 
<body>
 
<p>------------------------------------------</p>
 
<div class="projet">
 
	<div>
 
		<h1 class="lienvisible"> Title 1 </h1>
 
		<div class="hide">
			<p> 
				Test projet 1A
			</p> 
		</div>
 
	</div>
 
	<div>
 
		<h1 class="lienvisible"> Title 2 </h1>
 
		<div class="hide">
			<p> 
				Test projet 2A
			</p> 
		</div>
 
	</div>
 
	<div>
 
		<h1 class="lienvisible"> Title 3 </h1>
 
		<div class="hide">
			<p> 
				Test projet 3A
			</p> 
		</div>
 
	</div>
 
</div>	
 
<p>------------------------------------------</p>
 
</body>
 
</html>

Le problème de mon code de base est que l'action siblings ne fonctionne plus car les éléemnts ne sont pas des frères et sont dans des Divs différentes.

Suite au code de danielhagnoul:

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
85
86
87
88
89
90
91
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
	<!-- Titre de la page -->
		<title>Test</title>
 
	<!-- Codage de la page en utf-8 -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
	<!-- Langue de la page -->
		<meta http-equiv="Content-Language" content="fr-FR"/>
 
	<!-- Inclure le CSS dans la page html -->	
		<link rel="stylesheet" media="screen" type="text/css" href="css/style.css"/>
 
	<!-- Inclure le Code Java jquery dans la page html -->	
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
 
 
<!-- Permet le hide / show des réalisations -->
 
	<script type="text/javascript">
 
	$(document).ready(function() 
		{
		  $(".hide").hide();
 
		 $( ".lienvisible" ).on( "click", function()
		{
			$( ".hide" ).slideUp( "slow" );
			$( this ).nextAll( '.hide' ).eq( 0 ).slideToggle( 'slow' );
		}); 
 
		});
 
	</script>
 
</head>
 
<body>
 
<p>------------------------------------------</p>
 
<div class="projet">
 
	<div>
 
		<h1 class="lienvisible"> Title 1 </h1>
 
		<div class="hide">
			<p> 
				Test projet 1A
			</p> 
		</div>
 
	</div>
 
	<div>
 
		<h1 class="lienvisible"> Title 2 </h1>
 
		<div class="hide">
			<p> 
				Test projet 2A
			</p> 
		</div>
 
	</div>
 
	<div>
 
		<h1 class="lienvisible"> Title 3 </h1>
 
		<div class="hide">
			<p> 
				Test projet 3A
			</p> 
		</div>
 
	</div>
 
</div>	
 
<p>------------------------------------------</p>
 
</body>
 
</html>

Le code fonctione quasi comme je veux.

Une DIV est ouverte à la fois.

Simplement, j'aimerai pouvoir fermer une div ouverte.

Je n'ai toujors pas trouvé l'astuce.

Merci d'avance.

**Dae_mon** · 01/04/2013, 18h09

Bonjour à tous.

Merci à danielhagnoul d'avoir résolu mon problème.

Il m'avait envoyé le code il y a plusieurs jours mais une mauvaise manip et une parenthèse n'avait^pas été copiée donc le code ne marchait pas.

Maintenant il fonctionne.

Merci.

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
85
86
87
88
89
90
91
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
	<!-- Titre de la page -->
		<title>Test</title>
 
	<!-- Codage de la page en utf-8 -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
	<!-- Langue de la page -->
		<meta http-equiv="Content-Language" content="fr-FR"/>
 
	<!-- Inclure le CSS dans la page html -->	
		<link rel="stylesheet" media="screen" type="text/css" href="css/style.css"/>
 
	<!-- Inclure le Code Java jquery dans la page html -->	
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
 
 
<!-- Permet le hide / show des réalisations -->
 
	<script type="text/javascript">
 
	$(document).ready(function() 
	{
		$(".hide").hide();
		$( ".lienvisible" ).on( "click", function()
			{
			var jObj = $( this ).nextAll( '.hide' ).eq( 0 );
 
			$( ".hide" ).not( jObj ).slideUp( "slow" );
			jObj.slideToggle( 'slow' );
			});
	});	
 
	</script>
 
</head>
 
<body>
 
<p>------------------------------------------</p>
 
<div class="projet">
 
	<div>
 
		<h1 class="lienvisible"> Title 1 </h1>
 
		<div class="hide">
			<p> 
				Test projet 1A
			</p> 
		</div>
 
	</div>
 
	<div>
 
		<h1 class="lienvisible"> Title 2 </h1>
 
		<div class="hide">
			<p> 
				Test projet 2A
			</p> 
		</div>
 
	</div>
 
	<div>
 
		<h1 class="lienvisible"> Title 3 </h1>
 
		<div class="hide">
			<p> 
				Test projet 3A
			</p> 
		</div>
 
	</div>
 
</div>	
 
<p>------------------------------------------</p>
 
</body>
 
</html>

Afficher / cacher des Div

jQuery

Vue hybride

Discussions similaires

Partager

Partager