Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Updated demo and slight efficiency boost on gradient

  • Loading branch information...
commit 55f118962dbe6dcb616b5c02a3f98f0276e9e3b5 1 parent 33f50dc
Dean Sofer authored June 27, 2011
11  css/style.css
@@ -50,16 +50,15 @@
50 50
     -moz-text-shadow: -1px -1px 1px #ccc;
51 51
     -webkit-text-shadow: -1px -1px 1px #ccc;
52 52
 }
53  
-.accordion div.bgGradient {
54  
-    background: transparent url(../images/bgDescription.png) repeat-x bottom center;
55  
-    bottom: -340px;
56  
-    height: 340px;
57  
-}
58 53
 .accordion div {
59 54
     position: absolute;
60 55
     bottom: 0;
61 56
     left: 0;
62 57
     opacity: 0;
  58
+    background: transparent url(../images/bgDescription.png) repeat-x bottom center;
  59
+	padding-top: 340px;
  60
+	padding-bottom: 340px;
  61
+	margin-bottom: -340px;
63 62
 }
64 63
 .accordion div h2 {
65 64
     background: none;
@@ -112,6 +111,8 @@
112 111
 }
113 112
 .accordion div.active, .accordion .active div {
114 113
 	opacity: .9;
  114
+	margin-bottom: 0;
  115
+	padding-bottom: 0;
115 116
 }
116 117
 .accordion div h2.active, .accordion .active div h2 {
117 118
 	opacity: 1;
491  index.html
... ...
@@ -1,255 +1,256 @@
1 1
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 2
 <html>
3  
-    <head>
4  
-        <title>Elegant Accordion with jQuery and CSS3</title>
5  
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
6  
-        <meta name="description" content="Elegant Accordion with jQuery and CSS3" />
7  
-        <meta name="keywords" content="jquery, slide out,accordion, css3, fadeout, fadein, elegant, fancy, box shadow"/>
8  
-        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
9  
-        <style>
10  
-			*{
11  
-				margin:0;
12  
-				padding:0;
13  
-			}
14  
-			body{
15  
-				font-family:Arial;
16  
-				background:#fff url(pattern.png) repeat top left;
17  
-				margin-bottom: 40px;
18  
-			}
19  
-			h2{
20  
-				margin: 20px 0;
21  
-			}
22  
-			h2 a {
23  
-				padding: 10px;
24  
-				text-decoration: none;
25  
-				background: #000;
26  
-				color: #fff;
27  
-				box-shadow: 0 0 10px #000;
28  
-				-webkit-box-shadow: 0 0 10px #000;
29  
-				-moz-box-shadow: 0 0 10px #000;
30  
-				border-radius: 20px;
31  
-			}
32  
-			h3 {
33  
-				margin-top: 10px;
34  
-			}
35  
-			ul{
36  
-				padding: 10px 10px 10px 30px;
37  
-				box-shadow: 0 0 10px #ccc;
38  
-				-webkit-box-shadow: 0 0 10px #ccc;
39  
-				-moz-box-shadow: 0 0 10px #ccc;
40  
-				background: #fff;
41  
-			}
42  
-			ul ul {
43  
-				box-shadow: none;
44  
-				-webkit-box-shadow: none;
45  
-				-moz-box-shadow: none;
46  
-			}
47  
-			li{
48  
-				margin: 5px
49  
-			}
50  
-			pre {
51  
-				-webkit-box-shadow: 0 0 10px #ccc;
52  
-				padding: 10px;
53  
-				background: #fff;
54  
-			}
55  
-			a{
56  
-				color:#444;
57  
-			}
58  
-			a:hover{
59  
-				color:#999;
60  
-			}
61  
-			.title{
62  
-				width:500px;
63  
-				height:152px;
64  
-				background:transparent url(title.png) no-repeat top left;
65  
-				text-indent: -5000px;
66  
-			}
67  
-			a.back{
68  
-				background:transparent url(back.png) no-repeat top left;
69  
-				position:fixed;
70  
-				width:150px;
71  
-				height:27px;
72  
-				outline:none;
73  
-				bottom:0px;
74  
-				left:0px;
75  
-			}
76  
-			#content{
77  
-				margin:0 auto;
78  
-				width: 955px;
79  
-			}
80  
-			.reference{
81  
-				padding:20px;
82  
-				float: right;
83  
-				background-color:#fff;
84  
-				-moz-box-shadow:1px 3px 15px #ddd;
85  
-				-webkit-box-shadow:1px 3px 15px #ddd;
86  
-				box-shadow:1px 3px 15px #ddd;
87  
-				margin: 20px 40px 20px 520px;
88  
-			}
89  
-			.reference p a{
90  
-				text-transform:uppercase;
91  
-				text-shadow:1px 1px 1px #fff;
92  
-				color:#666;
93  
-				text-decoration:none;
94  
-				font-size:10px;
95  
-			}
96  
-			.reference p a:hover{
97  
-				color:#333;
98  
-			}
99  
-			.accordion {
100  
-				clear: both;
101  
-			}
102  
-			ul.accordion li.bg1{
103  
-				background-image:url(images/1.jpg);
104  
-			}
105  
-			ul.accordion li.bg2{
106  
-				background-image:url(images/2.jpg);
107  
-			}
108  
-			ul.accordion li.bg3{
109  
-				background-image:url(images/3.jpg);
110  
-			}
111  
-			ul.accordion li.bg4{
112  
-				background-image:url(images/4.jpg);
113  
-			}
114  
-        </style>
115  
-    </head>
  3
+<head>
  4
+	<title>Elegant Accordion with jQuery and CSS3</title>
  5
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6
+	<meta name="description" content="Elegant Accordion with jQuery and CSS3" />
  7
+	<meta name="keywords" content="jquery, slide out,accordion, css3, fadeout, fadein, elegant, fancy, box shadow"/>
  8
+	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  9
+	<style>
  10
+		*{
  11
+			margin:0;
  12
+			padding:0;
  13
+		}
  14
+		body{
  15
+			font-family:Arial;
  16
+			background:#fff url(pattern.png) repeat top left;
  17
+			margin-bottom: 40px;
  18
+		}
  19
+		h2{
  20
+			margin: 20px 0;
  21
+		}
  22
+		h2 a {
  23
+			padding: 10px;
  24
+			text-decoration: none;
  25
+			background: #000;
  26
+			color: #fff;
  27
+			box-shadow: 0 0 10px #000;
  28
+			-webkit-box-shadow: 0 0 10px #000;
  29
+			-moz-box-shadow: 0 0 10px #000;
  30
+			border-radius: 20px;
  31
+		}
  32
+		h3 {
  33
+			margin-top: 10px;
  34
+		}
  35
+		ul{
  36
+			padding: 10px 10px 10px 30px;
  37
+			box-shadow: 0 0 10px #ccc;
  38
+			-webkit-box-shadow: 0 0 10px #ccc;
  39
+			-moz-box-shadow: 0 0 10px #ccc;
  40
+			background: #fff;
  41
+		}
  42
+		ul ul {
  43
+			box-shadow: none;
  44
+			-webkit-box-shadow: none;
  45
+			-moz-box-shadow: none;
  46
+		}
  47
+		li{
  48
+			margin: 5px
  49
+		}
  50
+		pre {
  51
+			-webkit-box-shadow: 0 0 10px #ccc;
  52
+			padding: 10px;
  53
+			background: #fff;
  54
+		}
  55
+		a{
  56
+			color:#444;
  57
+		}
  58
+		a:hover{
  59
+			color:#999;
  60
+		}
  61
+		.title{
  62
+			width:500px;
  63
+			height:152px;
  64
+			background:transparent url(title.png) no-repeat top left;
  65
+			text-indent: -5000px;
  66
+		}
  67
+		a.back{
  68
+			background:transparent url(back.png) no-repeat top left;
  69
+			position:fixed;
  70
+			width:150px;
  71
+			height:27px;
  72
+			outline:none;
  73
+			bottom:0px;
  74
+			left:0px;
  75
+		}
  76
+		#content{
  77
+			margin:0 auto;
  78
+			width: 955px;
  79
+		}
  80
+		.reference{
  81
+			padding:20px;
  82
+			float: right;
  83
+			background-color:#fff;
  84
+			-moz-box-shadow:1px 3px 15px #ddd;
  85
+			-webkit-box-shadow:1px 3px 15px #ddd;
  86
+			box-shadow:1px 3px 15px #ddd;
  87
+			margin: 20px 40px 20px 520px;
  88
+		}
  89
+		.reference p a{
  90
+			text-transform:uppercase;
  91
+			text-shadow:1px 1px 1px #fff;
  92
+			color:#666;
  93
+			text-decoration:none;
  94
+			font-size:10px;
  95
+		}
  96
+		.reference p a:hover{
  97
+			color:#333;
  98
+		}
  99
+		.accordion {
  100
+			clear: both;
  101
+		}
  102
+		ul.accordion li.bg1{
  103
+			background-image:url(images/1.jpg);
  104
+		}
  105
+		ul.accordion li.bg2{
  106
+			background-image:url(images/2.jpg);
  107
+		}
  108
+		ul.accordion li.bg3{
  109
+			background-image:url(images/3.jpg);
  110
+		}
  111
+		ul.accordion li.bg4{
  112
+			background-image:url(images/4.jpg);
  113
+		}
  114
+	</style>
  115
+</head>
  116
+<body>
  117
+	<div id="content">
  118
+		
  119
+		<div class="reference">
  120
+			<p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=901">Image 1: Michelle Meiklejohn / FreeDigitalPhotos.net</a></p>
  121
+			<p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=879">Image 2: Luigi Diamanti / FreeDigitalPhotos.net</a></p>
  122
+			<p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=503">Image 3: Tina Phillips / FreeDigitalPhotos.net</a></p>
  123
+			<p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=1039">Image 4: Ahmet Guler / FreeDigitalPhotos.net</a></p>
  124
+		</div>
  125
+		<div class="title">Elegant Accordion with jQuery and CSS3</div>
116 126
 
117  
-    <body>
118  
-        <div id="content">
119  
-        	
120  
-	        <div class="reference">
121  
-	            <p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=901">Image 1: Michelle Meiklejohn / FreeDigitalPhotos.net</a></p>
122  
-	            <p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=879">Image 2: Luigi Diamanti / FreeDigitalPhotos.net</a></p>
123  
-	            <p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=503">Image 3: Tina Phillips / FreeDigitalPhotos.net</a></p>
124  
-	            <p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=1039">Image 4: Ahmet Guler / FreeDigitalPhotos.net</a></p>
125  
-	        </div>
126  
-            <div class="title">Elegant Accordion with jQuery and CSS3</div>
127  
-
128  
-            <ul class="accordion" id="accordion">
129  
-                <li class="bg1">
130  
-                    <h2>Guler</h2>
131  
-	                <div>
132  
-	                    <h2>Guler</h2>
133  
-	                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
134  
-	                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
135  
-	                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
136  
-	                        ut aliquip ex ea commodo consequat. Duis aute irure dolor in
137  
-	                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
138  
-	                        nulla pariatur.</p>
139  
-	                    <a href="#">more &rarr;</a>
140  
-	                </div>
141  
-                </li>
142  
-                <li class="bg2">
143  
-                    <h2>Phillips</h2>
144  
-	                <div>
145  
-	                    <h2>Phillips</h2>
146  
-	                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
147  
-	                        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
148  
-	                        quae ab illo inventore veritatis et quasi architecto beatae vitae
149  
-	                        dicta sunt explicabo. </p>
150  
-	                    <a href="#">more &rarr;</a>
151  
-	                </div>
152  
-                </li>
153  
-                <li class="bg3">
154  
-                    <h2>Diamanti</h2>
155  
-	                <div>
156  
-	                    <h2>Diamanti</h2>
157  
-	                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
158  
-	                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
159  
-	                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
160  
-	                        ut aliquip ex ea commodo consequat. Duis aute irure dolor in
161  
-	                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
162  
-	                        nulla pariatur.</p>
163  
-	                    <a href="#">more &rarr;</a>
164  
-	                </div>
165  
-                </li>
166  
-                <li class="bg4">
167  
-                    <h2>Meiklejohn</h2>
168  
-	                <div>
169  
-	                    <h2>Meiklejohn</h2>
170  
-	                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
171  
-	                        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
172  
-	                        quae ab illo inventore veritatis et quasi architecto beatae vitae
173  
-	                        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
174  
-	                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni
175  
-	                        dolores eos qui ratione voluptatem sequi nesciunt.</p>
176  
-	                    <a href="#">more &rarr;</a>
177  
-	                </div>
178  
-                </li>
179  
-            </ul>
180  
-            
181  
-	        <div id="info">
182  
-	        	<h2><a href="http://github.com/ProLoser/ElegantAccordion">Code + Download</a></h2>
183  
-	            <h2>Features</h2>
184  
-	            <ul>
185  
-	            	<li>Auto-rotate through all the slides with extra options
186  
-	            		<ul>
187  
-	            			<li>Pause on hover</li>
188  
-	            			<li>Stop rotation on click of a slide</li>
189  
-	            			<li>Option to stop rotation at the end of the slides</li>
190  
-	            		</ul>
191  
-	            	</li>
192  
-	            	<li>Options for setting delay, animation speed and easing</li>
193  
-	            	<li>Ability to set active slide onload using hashes (index.html#panel1-3)</li>
194  
-	            	<li>Works with multiple instances on the page</li>
195  
-	            	<li>Ability to specify width of active slide while automatically adjusting inactive slides</li>
196  
-	            </ul>
197  
-	            
198  
-	            <h2>Usage &amp; Options (Defaults)</h2>
199  
-<p>Requires jQuery and jQuery UI core</p>
  127
+		<ul class="accordion" id="accordion">
  128
+			<li class="bg1">
  129
+				<h2>Guler</h2>
  130
+				<div>
  131
+					<h2>Guler</h2>
  132
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  133
+						sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  134
+						Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
  135
+						ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  136
+						reprehenderit in voluptate velit esse cillum dolore eu fugiat
  137
+						nulla pariatur.</p>
  138
+					<a href="#">more &rarr;</a>
  139
+				</div>
  140
+			</li>
  141
+			<li class="bg2">
  142
+				<h2>Phillips</h2>
  143
+				<div>
  144
+					<h2>Phillips</h2>
  145
+					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  146
+						accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
  147
+						quae ab illo inventore veritatis et quasi architecto beatae vitae
  148
+						dicta sunt explicabo. </p>
  149
+					<a href="#">more &rarr;</a>
  150
+				</div>
  151
+			</li>
  152
+			<li class="bg3">
  153
+				<h2>Diamanti</h2>
  154
+				<div>
  155
+					<h2>Diamanti</h2>
  156
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  157
+						sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  158
+						Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
  159
+						ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  160
+						reprehenderit in voluptate velit esse cillum dolore eu fugiat
  161
+						nulla pariatur.</p>
  162
+					<a href="#">more &rarr;</a>
  163
+				</div>
  164
+			</li>
  165
+			<li class="bg4">
  166
+				<h2>Meiklejohn</h2>
  167
+				<div>
  168
+					<h2>Meiklejohn</h2>
  169
+					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  170
+						accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
  171
+						quae ab illo inventore veritatis et quasi architecto beatae vitae
  172
+						dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
  173
+						sit aspernatur aut odit aut fugit, sed quia consequuntur magni
  174
+						dolores eos qui ratione voluptatem sequi nesciunt.</p>
  175
+					<a href="#">more &rarr;</a>
  176
+				</div>
  177
+			</li>
  178
+		</ul>
  179
+		
  180
+		<div id="info">
  181
+			<h2><a href="http://github.com/ProLoser/ElegantAccordion">Code + Download</a></h2>
  182
+			<h2>Features</h2>
  183
+			<ul>
  184
+				<li>Auto-rotate through all the slides with extra options
  185
+					<ul>
  186
+						<li>Pause on hover</li>
  187
+						<li>Stop rotation on click of a slide</li>
  188
+						<li>Option to stop rotation at the end of the slides</li>
  189
+					</ul>
  190
+				</li>
  191
+				<li>Options for setting delay, animation speed and easing</li>
  192
+				<li>Ability to set active slide onload using hashes (index.html#panel1-3)</li>
  193
+				<li>Works with multiple instances on the page</li>
  194
+				<li>Ability to specify width of active slide while automatically adjusting inactive slides</li>
  195
+			</ul>
  196
+			
  197
+			<h2>Usage &amp; Options (Defaults)</h2>
  198
+			<p>Requires jQuery and jQuery UI core</p>
200 199
 <pre>$('.accordion').eAccordion({
201  
-	easing: 'swing',                // Anything other than "linear" or "swing" requires the easing plugin
202  
-	autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
203  
-	startStopped: false,            // If autoPlay is on, this can force it to start stopped
204  
-	stopAtEnd: false,		// If autoplay is on, it will stop when it reaches the last slide
205  
-	delay: 3000,                    // How long between slide transitions in AutoPlay mode
206  
-	animationTime: 600,             // How long the slide transition takes
207  
-	hashTags: true,                 // Should links change the hashtag in the URL?
208  
-	pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
209  
-	width: null,			// Override the default CSS width
210  
-	height: null,			// Override the default CSS height
211  
-	expandedWidth: '480px',		// Width of the expanded slide in pixels or percent (defaults to px), remaining slide sizes will be automatically adjusted
  200
+	easing: 'swing',	// Anything other than "linear" or "swing" requires the easing plugin
  201
+	autoPlay: true,		// This turns off the entire FUNCTIONALY, not just if it starts running or not
  202
+	startStopped: false,	// If autoPlay is on, this can force it to start stopped
  203
+	stopAtEnd: false,	// If autoplay is on, it will stop when it reaches the last slide
  204
+	delay: 4000,		// How long between slide transitions in AutoPlay mode
  205
+	animationTime: 100, // How long the slide transition takes
  206
+	hashTags: true,		// Should links change the hashtag in the URL?
  207
+	pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
  208
+	height: null,		// Override the default CSS height
  209
+	expandedWidth: '60%',	// Width of the expanded slide
  210
+	efficient: true,	// If true, applies the state classes (active/neutral) to the li's instead of its children
  211
+	neutralState: false // If there should be a state when all pages are equal size (usually onMouseOut)
212 212
 });</pre> 
213  
-	 
214  
-			<h3>Linking directly to slides</h3> 
  213
+ 
  214
+		<h3>Linking directly to slides</h3> 
215 215
 <pre>$("#slide-jump").click(function(){
216 216
 	$('.accordion').eq(1).eAccordion(4);
217 217
 });</pre> 
218  
-	 
219  
-			<h2>Changelog</h2>
220  
-			<h3>Version 0.1</h3>
221  
-	        <ul>
222  
-	        	<li>Turned into a jQuery plugin (using AnythingSlider as a base)</li>
223  
-	        	<li>Greatly refactored css/html markup required to generate the effect</li>
224  
-	        	<li>Added options to specify transition times and effects and other options</li>
225  
-	        	<li>Created an auto-rotation behavior</li>
226  
-	        	<li>Installed default loaded slide behavior using hashtags</li>
227  
-	        </ul>
228  
-	        </div>
229  
-            
230  
-            <a class="back" href="http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/"></a>
231  
-        </div>
  218
+ 
  219
+		<h2>Changelog</h2>
  220
+		<h3>Version 0.1</h3>
  221
+		<ul>
  222
+			<li>Turned into a jQuery plugin (using AnythingSlider as a base)</li>
  223
+			<li>Greatly refactored css/html markup required to generate the effect</li>
  224
+			<li>Added options to specify transition times and effects and other options</li>
  225
+			<li>Created an auto-rotation behavior</li>
  226
+			<li>Installed default loaded slide behavior using hashtags</li>
  227
+		</ul>
  228
+	</div>
  229
+	
  230
+	<a class="back" href="http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/"></a>
  231
+</div>
232 232
 
233  
-        <!-- The JavaScript -->
234  
-        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
235  
-        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
236  
-        <script type="text/javascript" src="js/jquery.elegantAccordion.js"></script>
237  
-        <script type="text/javascript">
238  
-            $(function() {
239  
-                $('#accordion').eAccordion({
240  
-					easing: 'swing',                // Anything other than "linear" or "swing" requires the easing plugin
241  
-					autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
242  
-					startStopped: false,            // If autoPlay is on, this can force it to start stopped
243  
-					stopAtEnd: false,				// If autoplay is on, it will stop when it reaches the last slide
244  
-					delay: 3000,                    // How long between slide transitions in AutoPlay mode
245  
-					animationTime: 600,             // How long the slide transition takes
246  
-					hashTags: true,                 // Should links change the hashtag in the URL?
247  
-					pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
248  
-					width: null,					// Override the default CSS width
249  
-					height: null,					// Override the default CSS height
250  
-					expandedWidth: '480px',			// Width of the expanded slide
251  
-				});
252  
-            });
253  
-        </script>
254  
-    </body>
  233
+	<!-- The JavaScript -->
  234
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  235
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
  236
+	<script type="text/javascript" src="js/jquery.elegantAccordion.js"></script>
  237
+	<script type="text/javascript">
  238
+		$(function() {
  239
+			$('#accordion').eAccordion({
  240
+				easing: 'swing',		// Anything other than "linear" or "swing" requires the easing plugin
  241
+				autoPlay: false,			// This turns off the entire FUNCTIONALY, not just if it starts running or not
  242
+				startStopped: false,	// If autoPlay is on, this can force it to start stopped
  243
+				stopAtEnd: false,		// If autoplay is on, it will stop when it reaches the last slide
  244
+				delay: 3000,			// How long between slide transitions in AutoPlay mode
  245
+				animationTime: 600,		// How long the slide transition takes
  246
+				hashTags: true,			// Should links change the hashtag in the URL?
  247
+				pauseOnHover: true,		// If true, and autoPlay is enabled, the show will pause on hover
  248
+				height: null,			// Override the default CSS height
  249
+				expandedWidth: '480px', // Width of the expanded slide
  250
+				efficient: false,		// If true, applies the state classes (active/neutral) to the li's instead of its children
  251
+				neutralState: true		// If there should be a state when all pages are equal size (usually onMouseOut)
  252
+			});
  253
+		});
  254
+	</script>
  255
+</body>
255 256
 </html>
6  js/jquery.elegantAccordion.js
@@ -74,7 +74,7 @@
74 74
 			}
75 75
 			
76 76
 			// Add formatting
77  
-			base.$items.prepend('<div class="bgGradient"/>').hover(function () {
  77
+			base.$items.hover(function () {
78 78
 				base.startStop(false);
79 79
 				base.gotoPage(base.$items.index(this) + 1);
80 80
 			},function(){
@@ -114,11 +114,11 @@
114 114
 			
115 115
 			if (animate !== false) {
116 116
 				if (base.options.efficient) {
117  
-					$page.stop().animate(
  117
+					$page.stop(true, true).animate(
118 118
 						{'width':base.options.expandedWidth},
119 119
 						base.options.animationTime,
120 120
 						base.options.easing
121  
-					).switchClass('neutral', 'active', base.options.animationTime).siblings().stop().animate({
  121
+					).switchClass('neutral', 'active', base.options.animationTime).siblings().stop(true, true).animate({
122 122
 						'width':base.contractedWidth},
123 123
 						base.options.animationTime,
124 124
 						base.options.easing

0 notes on commit 55f1189

Please sign in to comment.
Something went wrong with that request. Please try again.