-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathdemo.html
99 lines (88 loc) · 3.42 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slideToggle in plain JavaScript</title>
<link rel="stylesheet" href="demo-styles.css">
</head>
<body>
<header>
<svg class="site-logo" width="40" height="40">
<polygon points="10 0, 0 20, 20 40, 35 30, 40 10" />
</svg>
<span class="site-name">slideToggle Demo</span>
<button class="hamburger">
<svg width="32" height="32">
<rect id="line1" y="8" width="32" height="4" />
<rect id="line2" y="16" width="32" height="4" />
<rect id="line3" y="24" width="32" height="4" />
</svg>
</button>
<div class="site-navigation">
<nav>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Display</a></li>
<li><a href="#">Here</a></li>
</ul>
</nav>
</div>
</header>
<main>
<h1>slideToggle Demo - no jQuery necessary!</h1>
<p>Plain JavaScript version of the great <code>slideToggle()</code> function in jQuery. Slightly simplified.</p>
<p>Also includes <code>slideUp()</code> and <code>slideDown()</code>.</p>
<h2>Navigation Menu Demo</h2>
<p><strong>Click/tap the hamburger icon</strong> in the upper-right to open and close the navigation menu.</p>
<h2>Accordion Demo</h2>
<p><strong>Click the different tabs</strong> to open a panel with more information. The other tabs will close as you open new ones, but you can adjust your own code if you want them to stay open.</p>
<ul class="accordion">
<li>
<div class="tab">Accordion Tab One</div>
<div class="panel is-open">Description of accordion tab one</div>
</li>
<li>
<div class="tab">Accordion Tab Two</div>
<div class="panel">Some information about accordion tab two. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque cum officiis minima illo fuga rem quae rerum veritatis reprehenderit laboriosam similique eos fugiat maiores quia, dolor accusamus, pariatur qui sint?</div>
</li>
<li>
<div class="tab">Accordion Tab Three</div>
<div class="panel">
<img src="https://www.placecage.com/c/200/250" alt="Sample image"><br>
Content for accordion tab number three
</div>
</li>
</ul>
<h2>Like It?</h2>
<p>Head over to <a href="https://github.com/ericbutler555/plain-js-slidetoggle">the GitHub repo</a>, click the star button and download for your own personal and commercial use.</p>
</main>
<footer>
Created by Eric Butler in 2020
</footer>
<!-- Include slideToggle.min.js in your project -->
<script src="slideToggle.min.js"></script>
<!-- Then you can call .slideToggle(), .slideUp() and .slideDown() on elements just like in jQuery -->
<script>
// HEADER MENU FUNCTIONALITY:
var hamburger = document.querySelector('.hamburger');
hamburger.addEventListener('click', function(e) {
e.preventDefault();
hamburger.classList.toggle('is-active');
document.querySelector('.site-navigation').slideToggle(300);
});
// ACCORDION FUNCTIONALITY:
document.querySelector('.accordion').addEventListener('click', function(e) {
if (e.target.classList.contains('tab')) {
var nextPanel = e.target.nextElementSibling;
nextPanel.slideToggle(200);
// to make other panels collapse when you open one:
document.querySelectorAll('.accordion .panel').forEach(function(el) {
if (el.style.display !== "none" && el !== nextPanel) { el.slideUp(200); }
});
}
});
</script>
</body>
</html>