Afficher/Cacher plusieurs éléments

**Nico1131** · 08/11/2013, 09h48

Bonjour,

Ce que je souhaite faire et d'afficher/cacher plusieurs div mais pas tout a la fois avec un seul bouton mais par exemple :

Afficher la première div.
Afficher la seconde div -> Cacher la première div.
Afficher la première div -> Cacher la seconde div.
Cacher la seconde div.

Et vice versa.

Chaque div possède un bouton qui permet de l'afficher et de la cacher.

Le but est de faire en sorte qu'une seule div peut être afficher à la fois.

Voici mon code pour le moment (qui marche pas bien sur

).

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>
<html>
<head>
          <title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".lulz").hide();
	});
	function cacher(ele)
	{
	if($(ele).data("cacher") == false)
		{
			$("input").parent().children(".lulz").each(function(){
				$(this).hide(100);
			});
 
		$(ele).data("cacher",true);
		$(ele).val("Afficher");
 
		}else{
 
			$("input").parent().children(".lulz").each(function(){
				$(this).show(100);
			});
 
		$(ele).data("cacher",false);
		$(ele).val("Cacher");
 
		}
 
 
 
	}
</script>
<style type="text/css">
	.lulz
	{
		width: 200px;
		height: 200px;
		background:#efd;
	}
	.lulz:nth-child(2)
	{
		background: #aaa;
	}
</style>
</head>
<body>
	<div class="container">
		<input type="button" value="Afficher" onclick="cacher(this)" data-estcacher="false">
		<div class="lulz">
		</div>
	</div>
 
	<div class="container">
		<input type="button" value="Afficher" onclick="cacher(this)" data-estcacher="false">
		<div class="lulz">
		</div>
	</div>
</body>
</html>

Merci, d'avance

**Nico1131** · 08/11/2013, 10h15

Problème résolu

J'ai viré ton mon code JS et je l'ai remplacé par celui-ci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
 
	$(".lulz").hide();
        $( "input" ).on( "click", function()
            {
            var jObj = $( this ).nextAll( '.lulz' ).eq( 0 );
 
            $( ".lulz" ).not( jObj ).slideUp( "slow" );
            jObj.slideToggle( 'slow' );
            });
	});
}

**SpaceFrog** · 08/11/2013, 10h20

plus rationnellement et sans fioritures

http://codepen.io/anon/pen/qhdIy

**Nico1131** · 08/11/2013, 10h24

Oui mais non, il faut aussi que tu puisse cacher la première div avec son propre bouton et là c'est pas le cas quand je clique sur le premier bouton il affiche seulement.

**SpaceFrog** · 08/11/2013, 10h32

Suffit de remplacer hide par toggle... et modifier le value du bouton
http://codepen.io/anon/pen/qhdIy

Sans oublier de réinitialiser les "Afficher" des autres boutons ..

Afficher/Cacher plusieurs éléments

jQuery

Vue hybride

Discussions similaires

Partager

Partager