Besoin d'aide pour slider accordion JQuery

Version imprimable

Bonjour à tous.

Pour les besoins de mon stage j'ai besoin de créer un slider accordeon pour un site web.

J'ai donc pris un slider sur internet et modifier le code html et css et quelque peu le .js à ma façon, mais ou se trouve le problème, c'est que je n'arrive pas à afficher directement le slider déja ouvert.

C'est à dire que le slide se joue directement à l'ouverture/rafraichissement de la page, alors que j'aimerais qu'il reste static au début et que le slide débute seulement quand je clique sur mes lien. J'ai cherché et je n'ai pas trouvé, donc si quelqu'un pourrait regarder mon code, ça serait énormément sympa.

html:

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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/accordion.css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.msAccordion.js"></script>
<title>Common Accordion</title>
<style type="text/css">
.set{border-bottom:1px solid #000}
.set1{background: -moz-linear-gradient(center top , #1D292F, #27363E) repeat scroll 0 0 transparent; border-top: 1px solid #44606E;}
.set2{background: -moz-linear-gradient(center top , #1D292F, #27363E) repeat scroll 0 0 transparent; border-top: 1px solid #44606E;}
.set3{background: -moz-linear-gradient(center top , #1D292F, #27363E) repeat scroll 0 0 transparent; border-top: 1px solid #44606E;}
.set4{background: -moz-linear-gradient(center top , #1D292F, #27363E) repeat scroll 0 0 transparent; border-top: 1px solid #44606E;}
.set5{background: -moz-linear-gradient(center top , #1D292F, #27363E) repeat scroll 0 0 transparent; border-top: 1px solid #44606E;}
.set6{background: -moz-linear-gradient(center top , #1D292F, #27363E) repeat scroll 0 0 transparent; border-top: 1px solid #44606E;}
.set7{background: -moz-linear-gradient(center top , #1D292F, #27363E) repeat scroll 0 0 transparent; border-top: 1px solid #44606E;}
</style>
</head>
 
<body>
 
 
<div id="corps">
 
 
	<div id="accordion3" class="accordionWrapper">
 
 
 
		<div class="set set1">
   			 	<div class="title"> <p>Nos dernières ventes</p> </div>
    			<div class="content">  <div class="paragraphe"> <p> <img class = "image" src="image/menu-img-1.jpg" width="200" height="100" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor dolor, lobortis at molestie at, interdum a purus. Cras ornare, diam vitae dapibus lobortis, purus lacus vulputate tellus, ac sollicitudin sapien tellus vitae erat. Aliquam libero sem, pretium et ultricies sit amet, sodales fringilla ipsum. Integer id risus risus.consectetur adipiscing elit. Sed tortor dolor, lobortis at molestie at, interdum a purus. Cras ornare, diam vitae dapibus lobortis, purus lacus vulputate tellus, ac sollicitudin sapien tellus vitae erat. Aliquam libero sem, pretium et ultricies sit amet, sodales fringilla ipsum. Integer id risus risus.</p> </div> </div>
		</div>
 
 
 
		<div class="set set2">
    			<div class="title"><p>Nos dernières location</p> </div>
    			<div class="content"><img src="image/menu-img-2.jpg" width="680" height="198" /></div>
		</div>
 
 
 
		<div class="set set3">
    			<div class="title"><p>Nos coups de coeur</p> </div>
    			<div class="content"><img src="image/menu-img-3.jpg" width="680" height="198" /></div>
		</div>
 
 
 
		<div class="set set4">
    			<div class="title"><p>Nos exclusivités</p> </div>
   			 	<div class="content"><img src="image/menu-img-4.jpg" width="680" height="198" /><br /></div>
		</div>
 
 
	</div>
 
</div>
 
 
<script language="javascript" type="text/javascript">
$(document).ready(function() {
 
						   $("#accordion3").msAccordion({defaultid:0, vertical:true});
 
						   }
						   )
</script>
</body>
</html>

css:

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
.accordionWrapper{display:inline-block; background-color:#fff; overflow:hidden;}
.accordionWrapper img{vertical-align:top; border:0; margin:0; padding:0}
.accordionWrapper div{display:inline; float:left; margin:auto;}
.accordionWrapper div.title{cursor:pointer;}
.accordionWrapper div.content{display:none;}
 
#corps
{
width: 1400px;
height: 1000px;
margin: auto;
 
}
 
#accordion3
{
	border-right: 2px solid #44606E;
	border-left: 2px solid #44606E;
	border-bottom: 2px solid #44606E;
	margin-left:310px;
 
}
 
.title
{
	width: 680px;
	background: -moz-linear-gradient(center top , #1D292F, #27363E) repeat scroll 0 0 transparent;
	height: 40px;
	color: white;
}
 
.content
{
	color: white;
	width: 680px;
	height: 200px;
	overflow: auto;
	margin-left: 20px;
	background-color: #44606E;
}
 
.image
{
	float: left;
}
 
.content img
{
	padding-top: 1px;
}
 
.paragraphe img
{
	margin-left: 20px;
	margin-right: 20px;
}
 
.title:hover
{
	background: -moz-linear-gradient(center top , #1D292F, #27363E) repeat scroll 0 0 transparent;
	font-size: 40px;
}
 
.title p
{
	margin:0;
	font-size: 22px;
	padding-top: 5px;
	padding-left:10px;
}

mon fichier slide:

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
//menu Accordion
//author: Marghoob Suleman
//Date: 05th Aug, 2009
//Version: 1.0
//web: www.giftlelo.com | www.marghoobsuleman.com
;(function($){
	$.fn.msAccordion = function(options) {
		options = $.extend({
					currentDiv:'1',
					previousDiv:'',
					vertical: false,
					defaultid:0,
					currentcounter:0,
					intervalid:0,
					autodelay:0,
					event:"click",
					alldivs_array:new Array()
			}, options);
		$(this).addClass("accordionWrapper");
		$(this).css({overflow:"hidden"});
		//alert(this);
		var elementid = $(this).attr("id");
		var allDivs = this.children();
		if(options.autodelay>0)  {
			$("#"+ elementid +" > div").bind("mouseenter", function(){
														   pause();
														   });
			$("#"+ elementid +" > div").bind("mouseleave", function(){
																  startPlay();
																  });
		}
		//set ids
		allDivs.each(function(current) {
								 var iCurrent = current;
								 var sTitleID = elementid+"_msTitle_"+(iCurrent);
								 var sContentID = sTitleID+"_msContent_"+(iCurrent);
								 var currentDiv = allDivs[iCurrent];
								 var totalChild = currentDiv.childNodes.length;
								 var titleDiv = $(currentDiv).find("div.title");
								 titleDiv.attr("id", sTitleID);
								 var contentDiv = $(currentDiv).find("div.content");
								 contentDiv.attr("id", sContentID);
								 options.alldivs_array.push(sTitleID);
								 //$("#"+sTitleID).click(function(){openMe(sTitleID);});
								 $("#"+sTitleID).bind(options.event, function(){pause();openMe(sTitleID);});
								 });
 
		//make vertical
		if(options.vertical) {makeVertical();};
		//open default
		openMe(elementid+"_msTitle_"+options.defaultid);
		if(options.autodelay>0) {startPlay();};
		//alert(allDivs.length);
		function openMe(id) {
			var sTitleID = id;
			var iCurrent = sTitleID.split("_")[sTitleID.split("_").length-1];
			options.currentcounter = iCurrent;
			var sContentID = id+"_msContent_"+iCurrent;
			if($("#"+sContentID).css("display")=="none") {
				if(options.previousDiv!="") {
					closeMe(options.previousDiv);
				};
				if(options.vertical) {
					$("#"+sContentID).slideDown("fast");
				} else {
					$("#"+sContentID).show("fast");
				}
				options.currentDiv = sContentID;
				options.previousDiv = options.currentDiv;
			};
		};
		function closeMe(div) {
			if(options.vertical) {
				$("#"+div).slideUp("fast");
			} else {
				$("#"+div).hide("fast");
			};
		};	
		function makeVertical() {
			$("#"+elementid +" > div").css({display:"block", float:"none", clear:"both"});
			$("#"+elementid +" > div > div.title").css({display:"block", float:"none", clear:"both"});
			$("#"+elementid +" > div > div.content").css({clear:"both"});
		};
		function startPlay() {
			options.intervalid = window.setInterval(play, options.autodelay*1000);
		};
		function play() {
			var sTitleId = options.alldivs_array[options.currentcounter];
			openMe(sTitleId);
			options.currentcounter++;
			if(options.currentcounter==options.alldivs_array.length) options.currentcounter = 0;
		};
		function pause() {
			window.clearInterval(options.intervalid);
		};
		}
})(jQuery);

Merci au courageux qui m'aidera si quelqu'un passe par là.

Bonsoir

J'ai testé le plugin officiel (js, html et CSS) que je ne connaissais pas. Voici mon code de test. Je crois qu'il répond à vos questions sur la fermeture de l'accordéon au départ et la commande de l'ouverture au clic.

Copier-coller du code pour test. Lors de la première ouverture, le chargement des images à partir du serveur de marghoobsuleman.com est un peu pénible.

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />	
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		ul {margin-left:2.4rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* --- */
		.set{border-bottom:1px solid #000}
		.set1{background-color:#C77B3F;}
		.set2{background-color:#FFC732;}
		.set3{background-color:#007C90;}
		.set4{background-color:#AD6F08;}
		.set5{background-color:#387855;}
		.set6{background-color:#8C4B2D;}
		.set7{background-color:#82A668;}
 
		.accordionWrapper{display:inline-block; background-color:#fff; overflow:hidden;}
		.accordionWrapper img{vertical-align:top; border:0; margin:0; padding:0}
		.accordionWrapper div{display:inline; float:left; margin:auto;}
		.accordionWrapper div.title{cursor:pointer;}
		.accordionWrapper div.content{display:none;}
 
		#accordion3 {
			margin:12px;
		}
</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div>
			<button id="btn">Ouvrir le panneau 3</button>
		</div>
 
		<div id="accordion3" class="accordionWrapper" style="width:486px;">
			<div class="set set1">
				<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu1.jpg" width="198" height="29" /></div>
				<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-1.jpg" width="486" height="198" /></div>
			</div>
			<div class="set set2">
				<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu2.jpg" width="198" height="29" /></div>
				<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-2.jpg" width="486" height="198" /></div>
			</div>
			<div class="set set3">
				<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu3.jpg" width="198" height="29" /></div>
				<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-3.jpg" width="486" height="198" /></div>
			</div>
			<div class="set set4">
				<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu4.jpg" width="198" height="29" /></div>
				<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-4.jpg" width="486" height="198" /><br />
			</div>
			</div>
			<div class="set set5">
				<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu5.jpg" width="198" height="29" /></div>
				<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-5.jpg" width="486" height="198" /></div>
			</div>
			<div class="set set6">
				<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu6.jpg" width="198" height="29" /></div>
				<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-6.jpg" width="486" height="198" /></div>
			</div>
			<div class="set set7">
				<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu7.jpg" width="198" height="29" /></div>
				<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-7.jpg" width="486" height="198" /></div>
			</div>
		</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-01-06T21:41:19.000+01:00" pubdate>2012-01-06</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		//menu Accordion
		//author: Marghoob Suleman
		//Date: 05th Aug, 2009
		//Version: 1.0
		//web: www.giftlelo.com | www.marghoobsuleman.com
		;(function($){
			$.fn.msAccordion = function(options) {
				options = $.extend({
							currentDiv:'1',
							previousDiv:'',
							vertical: false,
							defaultid:0,
							currentcounter:0,
							intervalid:0,
							autodelay:0,
							event:"click",
							alldivs_array:new Array()
					}, options);
				$(this).addClass("accordionWrapper");
				$(this).css({overflow:"hidden"});
				//alert(this);
				var elementid = $(this).attr("id");
				var allDivs = this.children();
				if(options.autodelay>0)  {
					$("#"+ elementid +" > div").bind("mouseenter", function(){
																   pause();
																   });
					$("#"+ elementid +" > div").bind("mouseleave", function(){
																		  startPlay();
																		  });
				}
				//set ids
				allDivs.each(function(current) {
										 var iCurrent = current;
										 var sTitleID = elementid+"_msTitle_"+(iCurrent);
										 var sContentID = sTitleID+"_msContent_"+(iCurrent);
										 var currentDiv = allDivs[iCurrent];
										 var totalChild = currentDiv.childNodes.length;
										 var titleDiv = $(currentDiv).find("div.title");
										 titleDiv.attr("id", sTitleID);
										 var contentDiv = $(currentDiv).find("div.content");
										 contentDiv.attr("id", sContentID);
										 options.alldivs_array.push(sTitleID);
										 //$("#"+sTitleID).click(function(){openMe(sTitleID);});
										 $("#"+sTitleID).bind(options.event, function(){pause();openMe(sTitleID);});
										 });
 
				//make vertical
				if(options.vertical) {makeVertical();};
				//open default
				openMe(elementid+"_msTitle_"+options.defaultid);
				if(options.autodelay>0) {startPlay();};
				//alert(allDivs.length);
				function openMe(id) {
					var sTitleID = id;
					var iCurrent = sTitleID.split("_")[sTitleID.split("_").length-1];
					options.currentcounter = iCurrent;
					var sContentID = id+"_msContent_"+iCurrent;
					if($("#"+sContentID).css("display")=="none") {
						if(options.previousDiv!="") {
							closeMe(options.previousDiv);
						};
						if(options.vertical) {
							$("#"+sContentID).slideDown("slow");
						} else {
							$("#"+sContentID).show("slow");
						}
						options.currentDiv = sContentID;
						options.previousDiv = options.currentDiv;
					};
				};
				function closeMe(div) {
					if(options.vertical) {
						$("#"+div).slideUp("slow");
					} else {
						$("#"+div).hide("slow");
					};
				};	
				function makeVertical() {
					$("#"+elementid +" > div").css({display:"block", float:"none", clear:"both"});
					$("#"+elementid +" > div > div.title").css({display:"block", float:"none", clear:"both"});
					$("#"+elementid +" > div > div.content").css({clear:"both"});
				};
				function startPlay() {
					options.intervalid = window.setInterval(play, options.autodelay*1000);
				};
				function play() {
					var sTitleId = options.alldivs_array[options.currentcounter];
					openMe(sTitleId);
					options.currentcounter++;
					if(options.currentcounter==options.alldivs_array.length) options.currentcounter = 0;
				};
				function pause() {
					window.clearInterval(options.intervalid);
				};
				}
		})(jQuery);
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* Test */
			$("#accordion3").msAccordion({
				defaultid:-1, // fermé au départ
				vertical:true
			});
 
			$("#btn").click(function(){
				// ouvre la division enfant qui possède la classe "set3"
				$("#accordion3 > div.set3 > div.title").click();
			});
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
 
		$(window).load(function(){			
		});
	</script>
</body>  
</html>

07/01/2012, 04h50
hibernatee

Merci ENORMEMENT DanielHagnoul, ça marche. Je pensais pas que quelqu'un s'y pencherait.

J'ai aussi trouvé une autre façon, c'est à dire recréer ou copier la fonction openMe (nouvelle fonction open par ex) pour "open default" et changer le slidedown("fast");) par show().

Après avoir cherché pendant 8h sur les forums ou éplucher le code j'ai fini par trouver.

Dur dur le JQuery au début.