Afficher / cacher des Div

Version imprimable

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:

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>  <title>Test</title>  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  <meta http-equiv="Content-Language" content="fr-FR"/>  <link rel="stylesheet" media="screen" type="text/css" href="css/style.css"/>  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>  <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:

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

Bonsoir

Code:

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

29/03/2013, 11h01
Dae_mon

Le code fonctionne.

Merci beaucoup.

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

:ccool:
29/03/2013, 14h20
Dae_mon

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.

Bonjour à tous et bonne fêtes de Paques.

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

Voici mon code de base:

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

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.

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.

:ccool:

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