-
Notifications
You must be signed in to change notification settings - Fork 5
/
flexGallery.jade
55 lines (41 loc) · 1.04 KB
/
flexGallery.jade
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
extends base
block vars
- var title = 'Flex Panel Gallery'
block styles
link(rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Amatic+SC")
link(rel="stylesheet" type="text/css" href="styles/flexGallery.css")
block body
.panels
.panel.panel1
p Hey
p Let's
p Dance
.panel.panel2
p Give
p Take
p Receive
.panel.panel3
p Experience
p It
p Today
.panel.panel4
p Give
p All
p You can
.panel.panel5
p Life
p In
p Motion
script(type="text/javascript").
const $panels = document.querySelectorAll('.panel');
function togglePanel() {
const self = this
self.classList.toggle('open')
}
function toggleActive(e) {
const self = this
if (e.propertyName.includes('flex'))
self.classList.toggle('active')
}
$panels.forEach($panel => $panel.addEventListener('click', togglePanel))
$panels.forEach($panel => $panel.addEventListener('transitionend', toggleActive))