débutant, accordéon et sélecteur

Version imprimable

Bonjour à tous...

Comme le dis le sujet, je souhaite mettre en place un accordéon, mais je n'y arrive pas. Je suis parti sur l'exemple Accordeon (ici) de JQuery... mais je n'arrive pas a le réadapter... je me perd dans les pointeurs etc...

Je vous présente ma structure html pour un seul bloc !!
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div class="barre impaire"> <div class="top"> </div> <div class="middle"> <ul> <li class="picto"><img src="truc.png" /></li> <li class="date">18/03/2010</li> <li class="qui">Dudule</li> <li class="quoi">Mission à la con...</li> <li class="action"> </li> </ul> <br clear="all" /> </div> <div class="encart" style="display:none"> <div class="encart_top"> </div> <div class="encart_middle"> <p> Lorem ipsum dolor sit amet</p> </div> <div class="encart_bottom"> </div> </div> <div class="bottom"> </div> </div>
Mon javascript est plus simple... pour l'instant je clique sur la div.barre et ça fait apparaitre le div.encart...
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> $(document).ready(function(){ $('.encart').hide(); $(".barre").click(function(){ $(this).children(".encart").slideToggle("slow"); }); }); </script>
ça, ça marche !!!

Mais je souhaiterais pourvoir cliquer sur l'object li.quoi et faire apparaitre la div.encart mais fermer tout les autres...

et la je rame...
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> $(document).ready(function(){ $('.encart').hide(); $(".barre li.quoi").click(function(){ $(this).next("div.encart").slideToggle("slow") .siblings("div.encart").slideUp("slow"); }); }); </script>
Si vous avez une idée ou pouvez m'orienter...
d'avance merci
Benji

Bonsoir.

Exemple :

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui-1.8/css/humanity/jquery-ui-1.8.custom.css">	
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-ui-1.8.custom.min.js"></script>
	<script>
		$(function(){
			$(".encart").hide();
 
			$(".quoi").click(function(){
				$(".encart").hide("slow");
				$(this).parents(".middle").next(".encart").slideToggle("slow");
			});			
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<div class="barre impaire">
			<div class="middle">
				<ul>
					<li class="date">date 1</li>
					<li class="qui">qui 1</li>
					<li class="quoi">quoi 1</li>
					<li class="action">action 1</li>
				</ul>
			</div>
			<div class="encart">
				<div class="encart_top">
					<p>encart top</p>
				</div>
				<div class="encart_middle">
					<p>encart middle</p>
				</div>
				<div class="encart_bottom">
					<p>encart bottom</p>
				</div>
			</div>
		</div>		
 
		<div class="barre impaire">
			<div class="middle">
				<ul>
					<li class="date">date 2</li>
					<li class="qui">qui 2</li>
					<li class="quoi">quoi 2</li>
					<li class="action">action 2</li>
				</ul>
			</div>
			<div class="encart">
				<div class="encart_top">
					<p>encart top</p>
				</div>
				<div class="encart_middle">
					<p>encart middle</p>
				</div>
				<div class="encart_bottom">
					<p>encart bottom</p>
				</div>
			</div>
		</div>
 
		<div class="barre impaire">
			<div class="middle">
				<ul>
					<li class="date">date 3</li>
					<li class="qui">qui 3</li>
					<li class="quoi">quoi 3</li>
					<li class="action">action 3</li>
				</ul>
			</div>
			<div class="encart">
				<div class="encart_top">
					<p>encart top</p>
				</div>
				<div class="encart_middle">
					<p>encart middle</p>
				</div>
				<div class="encart_bottom">
					<p>encart bottom</p>
				</div>
			</div>
		</div>
 
	</div>
</body>  
</html>

ça marche... j'avais pas pensé au parent()...

Par contre du coup, il est impossible de pouvoir refermer la div affiché... quand je clique dessus... elle enchaine la fonction fermeture/ouverture...
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> $(document).ready(function(){ $('.quoi').click(function(){ $('.encart').slideUp(); $(this).parents('.middle').next('.encart').slideDown("slow") .siblings(".encart").slideToggle("slow"); }); }); </script>
Bon visiblement y' un truc que j'ai pas compris... humm
ça manque de théorie tout ça !!!

Bonsoir.

Désolé, je pensais bien que cela ne vous conviendrait pas, mais hier soir j'étais trop fatigué pour poursuivre.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $(".encart").hide(); $(".quoi").click(function(){ var obj = $(this).parents(".middle").next(".encart"); $(".encart").each(function(i, item){ if (obj[0] != item){ $(item).hide("slow"); } }); obj.slideToggle("slow"); });

27/03/2010, 01h16
Atomicfryer

super super ... un grand merci
Mon gourou en JQuery tu es devenu :ave:
mais vu l'heure... je vais tester ça demain 8-)

Sinon rassure toi... je n'en demandais pas tant... une explication m'aurais suffit... la c'est carrément la classe 8-)