/
Accordion Menu 4.html
81 lines (66 loc) · 2.46 KB
/
Accordion Menu 4.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>
<html>
<head>
<meta charset="utf-8" />
<title>page</title>
<link rel="stylesheet" type="text/css" href="Accordion Menu 4.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body>
<div class="container">
<div class="accordion">Accordion Menu 4</div>
<!-- Item 1 -->
<div class="item">
<div class="section">Read me</div>
<div class="info">
Click on an item to open. Click on its header or the list header to close.
</div>
</div>
<!-- Item 2 -->
<div class="item">
<div class="section">Read me too</div>
<div class="info">
Add the class 'arrows' to nav.accordion to add dropdown arrows.
</div>
</div>
<!-- Item 3 -->
<div class="item">
<div class="section">Item 3</div>
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor
pretium viverra suspendisse potenti.
</div>
</div>
<!-- Item 4 -->
<div class="item">
<div class="section">Item 4</div>
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor
pretium viverra suspendisse potenti.
</div>
</div>
<!-- Item 5 -->
<div class="item">
<div class="section">Item 5</div>
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor
pretium viverra suspendisse potenti.
</div>
</div>
</div>
<script>
let item = document.querySelectorAll(".item");
item.forEach((x) => x.addEventListener("click", itemFunction))
function itemFunction() {
this.classList.toggle("active")
}
</script>
</body>
</html>