débutant, accordéon et sélecteur

**Atomicfryer** · 25/03/2010, 23h39

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

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

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

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

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

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

**danielhagnoul** · 26/03/2010, 02h18

Bonsoir.

Exemple :

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

**Atomicfryer** · 26/03/2010, 10h27

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

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

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

**danielhagnoul** · 27/03/2010, 01h08

Bonsoir.

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

Code :

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

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");
});

**Atomicfryer** · 27/03/2010, 01h16

super super ... un grand merci
Mon gourou en JQuery tu es devenu

mais vu l'heure... je vais tester ça demain

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

débutant, accordéon et sélecteur

jQuery

Discussions similaires

Partager

Partager