forked from deleteme/prototype-accordion
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
81 lines (66 loc) · 3.62 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
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Prototype Accordion Demo</title>
<link rel="stylesheet" href="stylesheets/accordion.css" type="text/css" media="screen" />
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/effects.js" type="text/javascript"></script>
<script src="javascripts/accordion.js" type="text/javascript"></script>
<script type="text/javascript">
document.observe('dom:loaded', function(){
var accordion = new Accordion('accordion');
var accordion = new Accordion('accordion-not-mutually-exclusive', {
mutuallyExclusive: false
});
});
</script>
<link href="http://github.com/feeds/deleteme/commits/prototype-accordion/master" rel="alternate" title="Recent Commits to prototype-accordion:master" type="application/atom+xml" />
</head>
<body>
<h1>Prototype Accordion Demo</h1>
<h2>Show one at a time</h2>
<ul id="accordion">
<li class="section">
<a href="#one" class="title"><span>First Section</span></a>
<div class="toggle">
<p>ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li class="section">
<a href="#two" class="title"><span>Second Section</span></a>
<div class="toggle">
<p>TWO Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li class="section">
<a href="#three" class="title"><span>Third Section</span></a>
<div class="toggle">
<p>THREE Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
</ul>
<h2>Show more than one at a time</h2>
<ul id="accordion-not-mutually-exclusive">
<li class="section">
<a href="#one" class="title"><span>First Section</span></a>
<div class="toggle">
<p>ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li class="section">
<a href="#two" class="title"><span>Second Section</span></a>
<div class="toggle">
<p>TWO Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li class="section">
<a href="#three" class="title"><span>Third Section</span></a>
<div class="toggle">
<p>THREE Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
</ul>
</body>
</html>