-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathexample.html
165 lines (157 loc) · 15.2 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Accordion example</title>
<link rel="stylesheet" href="./accordion.css">
<script src="./accordion.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var accordion = new Accordion(
{
//See options in accordion.js to change selectors, etc
'auto_expand_first_item': true,
'item_expand_unique': true,
callbacks: {
'open': {
'before': function( params ) {
console.log('About to open accordion' );
console.log( params );
},
'after': function( params ) {
console.log( 'Just opened accordion' );
console.log( params );
}
}
}
}
);
var accordion_alt = new Accordion(
{
//See options in accordion.js to change selectors, etc
'selector_bundle': '.accordion_alt',
'auto_expand_first_item': true,
'item_expand_unique': true,
callbacks: {
'open': {
'before': function( params ) {
console.log('About to open accordion' );
console.log( params );
},
'after': function( params ) {
console.log( 'Just opened accordion' );
console.log( params );
}
}
}
}
);
});
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla nec neque at accumsan. Ut vitae nunc et urna elementum lacinia. Suspendisse tincidunt leo sed metus congue, id vestibulum augue sagittis. Suspendisse scelerisque, elit ac pretium fringilla, urna nisi mollis ante, sed rutrum nibh nisl eu nunc. Donec commodo, ex ac aliquet ultricies, orci leo finibus urna, ac tempor lectus magna ut tellus. Vivamus quam arcu, commodo aliquet finibus non, rutrum ut quam. Nullam purus diam, dignissim ac porta vel, dapibus ultricies lorem. Nunc dapibus vitae arcu sed elementum. Donec nec dolor semper, accumsan neque vel, consectetur nibh.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla nec neque at accumsan. Ut vitae nunc et urna elementum lacinia. Suspendisse tincidunt leo sed metus congue, id vestibulum augue sagittis. Suspendisse scelerisque, elit ac pretium fringilla, urna nisi mollis ante, sed rutrum nibh nisl eu nunc. Donec commodo, ex ac aliquet ultricies, orci leo finibus urna, ac tempor lectus magna ut tellus. Vivamus quam arcu, commodo aliquet finibus non, rutrum ut quam. Nullam purus diam, dignissim ac porta vel, dapibus ultricies lorem. Nunc dapibus vitae arcu sed elementum. Donec nec dolor semper, accumsan neque vel, consectetur nibh.
</p>
<h2>Accordion Bundle</h2>
<div class="accordion">
<div class="accordion__item">
<div class="accordion__item__heading"><a href="#">Accordion Heading 1</a></div>
<div class="accordion__item__content">
<div class="accordion__item__content__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://www.example.com">Phasellus arcu diam</a>, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://www.example.com">Phasellus arcu diam</a>, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.
</p>
</div>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__heading"><a href="#">Accordion Heading 2</a></div>
<div class="accordion__item__content">
<div class="accordion__item__content__inner">Accordion Content 2</div>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__heading"><a href="#">Accordion Heading 3</a></div>
<div class="accordion__item__content">
<div class="accordion__item__content__inner"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu diam, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://www.example.com">Phasellus arcu diam</a>, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://www.example.com">Phasellus arcu diam</a>, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://www.example.com">Phasellus arcu diam</a>, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.
</p></div>
</div>
</div>
</div>
<h2>Another Accordion Bundle</h2>
<div class="accordion">
<div class="accordion__item">
<div class="accordion__item__heading"><a href="#">Accordion 2 Heading 1</a></div>
<div class="accordion__item__content">
<div class="accordion__item__content__inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu diam, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.</div>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__heading"><a href="#">Accordion 2 Heading 2</a></div>
<div class="accordion__item__content">
<div class="accordion__item__content__inner">Accordion Content 2</div>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__heading"><a href="#">Accordion 2 Heading 3</a></div>
<div class="accordion__item__content">
<div class="accordion__item__content__inner"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu diam, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://www.example.com">Phasellus arcu diam</a>, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.
</p></div>
</div>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla nec neque at accumsan. Ut vitae nunc et urna elementum lacinia. Suspendisse tincidunt leo sed metus congue, id vestibulum augue sagittis. Suspendisse scelerisque, elit ac pretium fringilla, urna nisi mollis ante, sed rutrum nibh nisl eu nunc. Donec commodo, ex ac aliquet ultricies, orci leo finibus urna, ac tempor lectus magna ut tellus. Vivamus quam arcu, commodo aliquet finibus non, rutrum ut quam. Nullam purus diam, dignissim ac porta vel, dapibus ultricies lorem. Nunc dapibus vitae arcu sed elementum. Donec nec dolor semper, accumsan neque vel, consectetur nibh.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla nec neque at accumsan. Ut vitae nunc et urna elementum lacinia. Suspendisse tincidunt leo sed metus congue, id vestibulum augue sagittis. Suspendisse scelerisque, elit ac pretium fringilla, urna nisi mollis ante, sed rutrum nibh nisl eu nunc. Donec commodo, ex ac aliquet ultricies, orci leo finibus urna, ac tempor lectus magna ut tellus. Vivamus quam arcu, commodo aliquet finibus non, rutrum ut quam. Nullam purus diam, dignissim ac porta vel, dapibus ultricies lorem. Nunc dapibus vitae arcu sed elementum. Donec nec dolor semper, accumsan neque vel, consectetur nibh.
</p>
<h2>Separately instantiated Accordion Bundle</h2>
<div class="accordion_alt">
<div class="accordion__item">
<div class="accordion__item__heading"><a href="#">Accordion 2 Heading 1</a></div>
<div class="accordion__item__content">
<div class="accordion__item__content__inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu diam, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.</div>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__heading"><a href="#">Accordion 2 Heading 2</a></div>
<div class="accordion__item__content">
<div class="accordion__item__content__inner">Accordion Content 2</div>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__heading"><a href="#">Accordion 2 Heading 3</a></div>
<div class="accordion__item__content">
<div class="accordion__item__content__inner"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu diam, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://www.example.com">Phasellus arcu diam</a>, gravida at nisi in, commodo porta eros. Nullam ornare mattis rutrum. Aliquam pulvinar eros vel nunc consectetur, nec tempus neque mattis. Donec suscipit justo non auctor auctor. Quisque id nibh justo. Pellentesque tincidunt orci a enim malesuada semper. Morbi quis leo sagittis augue molestie mattis ut lobortis lectus. Maecenas nec est ipsum. Phasellus finibus ultricies lectus ut pharetra. Maecenas lobortis porttitor odio in tristique. Etiam lobortis ornare magna at aliquet.
</p></div>
</div>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla nec neque at accumsan. Ut vitae nunc et urna elementum lacinia. Suspendisse tincidunt leo sed metus congue, id vestibulum augue sagittis. Suspendisse scelerisque, elit ac pretium fringilla, urna nisi mollis ante, sed rutrum nibh nisl eu nunc. Donec commodo, ex ac aliquet ultricies, orci leo finibus urna, ac tempor lectus magna ut tellus. Vivamus quam arcu, commodo aliquet finibus non, rutrum ut quam. Nullam purus diam, dignissim ac porta vel, dapibus ultricies lorem. Nunc dapibus vitae arcu sed elementum. Donec nec dolor semper, accumsan neque vel, consectetur nibh.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla nec neque at accumsan. Ut vitae nunc et urna elementum lacinia. Suspendisse tincidunt leo sed metus congue, id vestibulum augue sagittis. Suspendisse scelerisque, elit ac pretium fringilla, urna nisi mollis ante, sed rutrum nibh nisl eu nunc. Donec commodo, ex ac aliquet ultricies, orci leo finibus urna, ac tempor lectus magna ut tellus. Vivamus quam arcu, commodo aliquet finibus non, rutrum ut quam. Nullam purus diam, dignissim ac porta vel, dapibus ultricies lorem. Nunc dapibus vitae arcu sed elementum. Donec nec dolor semper, accumsan neque vel, consectetur nibh.
</p>
</body>
</html>