-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
553 lines (448 loc) · 31.6 KB
/
index.html
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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<title>Accordion v2.1 Demo</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="accordion, javascript accordion, scriptaculous" />
<meta name="description" content="The ultimate modal window system, LightWindow, allows you to build your own theem, create mixed media galleries including flash, quictkime and images. Through a variety of parameters this system can do it all and recreate any other system out there!" />
<meta name="robots" content="index, follow" />
<!-- JavaScript -->
<!-- <script type="text/javascript" src="combine.php?type=javascript&files=prototype.js,effects.js,accordion.js,code_highlighter.js,javascript.js,html.js"></script> -->
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
<script type="text/javascript" src="javascript/code_highlighter.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<script type="text/javascript" src="javascript/html.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript">
//
// In my case I want to load them onload, this is how you do it!
//
Event.observe(window, 'load', loadAccordions, false);
//
// Set up all accordions
//
function loadAccordions() {
var topAccordion = new accordion('horizontal_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});
var bottomAccordion = new accordion('vertical_container');
var nestedVerticalAccordion = new accordion('vertical_nested_container', {
classNames : {
toggle : 'vertical_accordion_toggle',
toggleActive : 'vertical_accordion_toggle_active',
content : 'vertical_accordion_content'
}
});
// Open first one
bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
// Open second one
topAccordion.activate($$('#horizontal_container .horizontal_accordion_toggle')[2]);
}
</script>
<!-- CSS -->
<style type="text/css" >
/*
Vertical Accordions
*/
.accordion_toggle {
display: block;
height: 30px;
width: 680px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
color: #ffffff;
border-bottom: 1px solid #f68263;
}
.accordion_content {
background-color: #ffffff;
color: #444444;
overflow: hidden;
}
.accordion_content h2 {
margin: 15px 0 5px 10px;
color: #0099FF;
}
.accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}
.vertical_accordion_toggle {
display: block;
height: 30px;
width: 600px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.vertical_accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
color: #ffffff;
border-bottom: 1px solid #f68263;
}
.vertical_accordion_content {
background-color: #ffffff;
color: #444444;
overflow: hidden;
}
.vertical_accordion_content h2 {
margin: 15px 0 5px 10px;
color: #0099FF;
}
.vertical_accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}
/*
Horizontal Accordion
*/
.horizontal_accordion_toggle {
/* REQUIRED */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */
display: block;
height: 100px;
width: 30px;
background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
color: #ffffff;
text-decoration: none;
outline: none;
border-right: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.horizontal_accordion_toggle_active {
background: url(images/h_accordion_toggle_active.jpg) no-repeat top left #e0542f;
border-right: 1px solid #f68263;
}
.horizontal_accordion_content {
/* REQUIRED */
height: 100px; /* We need to define a height for the accordion as it stretches the width */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */
overflow: hidden;
background-color: #ffffff;
color: #444444;
}
.horizontal_accordion_content p {
width: 450px;
line-height: 150%;
padding: 5px 10px 15px 10px;
}
/* Container styling*/
#horizontal_container {
margin: 20px auto 20px auto;
width: 680px;
height: 100px;
}
#vertical_nested_container {
margin: 20px auto 20px auto;
width: 620px;
}
</style>
</head>
<body>
<div id="container">
<h1><span>Accordion</span> v2.1</h1>
<p class="description" >Finally a lightweight accordion that is built with scriptaculous and works properly in every browser.</p>
<div id="vertical_container" >
<h1 class="accordion_toggle">Changelog</h1>
<div class="accordion_content">
<h2>What's new in v2.1?</h2>
<p>Prototype 1.6 compatibility.</p>
<h2>What's new in v2.0?</h2>
<p>Well i listened to all you guys out there in my forum and my blog and now all those wishes have been granted!</p>
<p>
<ul style="margin: 0 0 0 50px;">
<li>Open/Close functionality added (Click on an active accordion).</li>
<li>Nested Vertical Accordions</li>
<li>Accordions will dynamically resize on content added REAL TIME!</li>
<li>...lots of bug fixes!</li>
</ul>
</p>
</div>
<h1 class="accordion_toggle">Donate! Help me get a MacBook Pro</h1>
<div class="accordion_content">
<img src="images/macbook.png" align="left" style="padding: 10px 10px 0 10px;" />
<h2>Help me get a MacBook Pro!</h2>
<p>
Hello everyone, I have now released my accordion script and its better than any other one out there! That's right I said it. I will be releasing a few more of my scripts in the weeks to come. In the meantime though help me get a MacBook Pro so I have a mac to test on! Anything you could throw my way would be appreciated, I will also give back in my <a href="http://forum.stickmanlabs.com">forums</a>, so no worries, I give back even more!
</p>
<p> </p>
<div align="center" style="width: 50%; float: left;" >
<strong>$5 donation</strong>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form>
</div>
<div align="center" style="width: 50%; float: left;" >
<strong>Specify your own donation</strong>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form>
</div>
<p> </p>
</div>
<h1 class="accordion_toggle">Why another Accordion?</h1>
<div class="accordion_content">
<h2>Uhm... There wasn't one, well not a good one.</h2>
<p>
Haha! Like there was one. Well there was, but only for <a href="http://openrico.org/demos?demo=accordion" >Rico</a> and a bloated one by <a href="http://moofx.mad4milk.net/">mootools</a>, that's right I said bloated, live with it. For some reason there wasn't one for <a href="http://script.aculo.us/">scriptaculous</a> but now there is. The why is pretty simple, just like every other library, I had a need for it. Hope you can get some use out of it.
</p>
<p>
Oh, by the way, not only does this script handle <strong>vertical</strong> accordions, but <strong>horizontal</strong> as well!
</p>
</div>
<h1 class="accordion_toggle">A Horizontal Accordion! (Nested)</h1>
<div class="accordion_content">
<h2>Oh yeah, just a few options... BAM Horizontal!</h2>
<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle"></h3>
<div class="horizontal_accordion_content">
<p>
Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit.
</p>
</div>
<h3 class="horizontal_accordion_toggle"></h3>
<div class="horizontal_accordion_content">
<p>
Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
</div>
<h3 class="horizontal_accordion_toggle"></h3>
<div class="horizontal_accordion_content">
<p>
Curabitur quam lorem, laoreet molestie, eleifend id, pulvinar vel, nunc. Proin congue felis quis purus. Aenean porttitor, lacus vel bibendum pulvinar, leo nulla suscipit leo, nec lobortis orci diam eget turpis. Sed eu eros et orci consectetuer molestie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</div>
<h3 class="horizontal_accordion_toggle"></h3>
<div class="horizontal_accordion_content">
<p>
Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat.
</p>
</div>
<h3 class="horizontal_accordion_toggle"></h3>
<div class="horizontal_accordion_content">
<p>
Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit. Nulla suscipit, elit quis pretium hendrerit, nisi sapien lobortis libero, et consectetuer lorem sapien id urna.
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">A Vertical Nested Accordion!</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle">Hablo pig-latin?</h3>
<div class="vertical_accordion_content">
<p>
Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit.
</p>
</div>
<h3 class="vertical_accordion_toggle">Isn't this kewl?'</h3>
<div class="vertical_accordion_content">
<p>
Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
</div>
<h3 class="vertical_accordion_toggle">Click me!</h3>
<div class="vertical_accordion_content">
<p>
Curabitur quam lorem, laoreet molestie, eleifend id, pulvinar vel, nunc. Proin congue felis quis purus. Aenean porttitor, lacus vel bibendum pulvinar, leo nulla suscipit leo, nec lobortis orci diam eget turpis. Sed eu eros et orci consectetuer molestie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</div>
<h3 class="vertical_accordion_toggle">Don't you dare....'</h3>
<div class="vertical_accordion_content">
<p>
Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat.
</p>
</div>
<h3 class="vertical_accordion_toggle">Your Mom!</h3>
<div class="vertical_accordion_content">
<p>
Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit. Nulla suscipit, elit quis pretium hendrerit, nisi sapien lobortis libero, et consectetuer lorem sapien id urna.
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">Download the code!</h1>
<div class="accordion_content">
<h2>Download</h2>
<p>
Get it here <a href="accordion.zip">accordion v1.0</a>
</p>
<p>Oh and... help me with a MacBook Pro?</p>
<div align="center" style="width: 50%; float: left;" >
<strong>$5 donation</strong>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form>
</div>
<div align="center" style="width: 50%; float: left;" >
<strong>Specify your own donation</strong>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form>
</div>
</div>
<h1 class="accordion_toggle">How to Use</h1>
<div class="accordion_content">
<h2>Include the files</h2>
<p>
You need to include accordion.js but it requires prototype.js and effects.js (like I said this is for scriptaculous!). As long as you are using at least the latest stable builds you are fine.
<pre><code class="html"><script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script></code></pre>
<h2>The Markup</h2>
<p>
Pretty much anything will work, so its really up to you. The presentation is up to you (see the source of this page for some examples). Ideally you should probably use header tags with div's containing the content as this would be best symantically speaking and for seo. Below is a basic example.
</p>
<pre><code class="html"><h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>
...
...
...
<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div></code></pre>
<p>
The important thing here is that it need to be the title element then the content element and so on, nothing in between, just like every other accordion.
</p>
<h2>The Options</h2>
<p>
Not many options, but all you need to make this thing do anything you may require!
</p>
<pre><code class="javascript">// The speed of the accordion
resizeSpeed : 8,
// The classnames to look for
classNames : {
// The standard class for the title bar
toggle : 'accordion_toggle',
// The class used for the active state of the title bar
toggleActive : 'accordion_toggle_active',
// The class used to find the content
content : 'accordion_content'
},
// If you don't want the accordion to stretch to fit
// its content, set a value here, handy for horixontal examples.
defaultSize : {
height : null,
width : null
},
// The direction of the accordion
direction : 'vertical',
// Should the accordion activate on click or say on mouseover? (apple.com)
onEvent : 'click'</code></pre>
<p>
Now these are the default options set automatically, so let's now take a look on how to create an accordion and change those options.
</p>
<h2>The Javascript</h2>
<p>
Below is how I created the two accordions you see on this page, one vertical, one horizontal with a specified width.
</p>
<pre><code class="javascript">// General Syntax
new accordion('container-selector', options);
// Horizontal example
var horizontalAccordion = new accordion('#top_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});
// Vertical Accordion
var verticalAccordion = new accordion('#bottom_container');</code></pre>
<p>
Ok, so now we know how to do the markup, hopefully you got creative with the css and looked at the source of this page to get started, and not you know how make an accordion. What if you want to use javascript to open a slide on load or at any time... here is how.
</p>
<pre><code class="javascript">// Let's create it
var verticalAccordion = new accordion('#bottom_container');
// Now lets open the first slide
verticalAccordion.activate($$('#bottom_container .accordion_toggle')[0]);
</code></pre>
<p>
So we use the selector method from prototype to get the first title bar from the container+classname and we want the first one so we use [0]. Couldn't be easier!
</p>
<h2>Preload</h2>
<p>So let's say you want all your accordions closed on page load but don't want the nasty flash and don't want to sacrifice accessibility. </p>
<pre><code class="javascript">// Special thanks go out to Will Shaver @ http://primedigit.com/
var verticalAccordions = $$('.accordion_toggle');
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: '0px'
});
});
</code></pre>
</div>
</div>
<div class="page-footer">
<p>© Copyright 2007 <a href="http://www.stickmanlabs.com"><small>stickmanlabs</small></a></p>
<p>Accordion is freely distributable under the terms of an MIT-style license.</p>
</div>
</div>
<script type="text/javascript" >
//
// You can hide the accordions on page load like this, it maintains accessibility
//
// Special thanks go out to Will Shaver @ http://primedigit.com/
//
var verticalAccordions = $$('.accordion_toggle');
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: '0px'
});
});
</script>
</body>
</html>