Afficher/Cacher plusieurs éléments
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:
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 ;)
