-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (74 loc) · 3.3 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Object literal - list control / content collapse</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="" />
<meta name="subject" content="" />
<link href="css/main.css" rel="stylesheet" media="screen" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="list-control">
<ul class="sections">
<li>
<h2><a href="/section/1">Section 1</a></h2>
<ul>
<li>
<h3><a href="/section/1/content/1">Content 1:1</a></h3>
<p>Morbi pretium est at eleifend aliquam. Aliquam mattis, ligula vitae tincidunt rhoncus, ex odio ultrices sapien, et euismod elit urna non lorem. Praesent velit leo, egestas non rhoncus porttitor, tincidunt id lectus. </p>
</li>
<li>
<h3><a href="/section/1/content/2">Content 1:2</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam maximus consequat lectus, at tincidunt urna dignissim sed. Nam accumsan leo at gravida congue.Vestibulum quis ex ipsum. Curabitur augue sem, accumsan feugiat tellus eu, placerat feugiat massa.</p>
</li>
</ul>
</li>
<li>
<h2><a href="/section/2">Section 2</a></h2>
<ul>
<li>
<h3><a href="/section/2/content/1">Content 2:1</a></h3>
<p>Curabitur fringilla, vitae posuere dolor neque nec ante. Etiam dolor elit, ornare ac arcu a, suscipit vestibulum nisl.</p>
<p>Morbi pretium est at eleifend aliquam. Praesent velit leo, egestas non rhoncus porttitor, tincidunt id lectus. </p>
</li>
<li>
<h3><a href="/section/2/content/2">Content 2:2</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan leo at gravida congue.</p>
</li>
<li>
<h3><a href="/section/2/content/3">Content 2:3</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae vulputate felis, vitae lobortis sem.</p>
<p>Maecenas bibendum, risus non ultrices viverra, at sagittis lectus velit sit amet velit.</p>
</li>
</ul>
</li>
<li>
<h2><a href="/section/3">Section 3</a></h2>
<ul>
<li>
<h3><a href="/section/3/content/1">Content 3:1</a></h3>
<p>Curabitur fringilla, odio ac porttitor malesuada, vitae posuere dolor neque nec ante. Ut eget orci leo.</p>
</li>
<li>
<h3><a href="/section/3/content/3">Content 3:3</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nulla tincidunt, semper velit.</p>
<p>Maecenas bibendum, risus non ultrices viverra, magna elit malesuada dolor, at sagittis lectus velit sit amet velit.</p>
</li>
</ul>
</li>
<li>
<h2><a href="/section/3">Section 4</a></h2>
<ul>
<li>
<h3><a href="/section/3/content/1">Content 4:1</a></h3>
<p>Curabitur fringilla, odio ac porttitor malesuada, vitae posuere dolor neque nec ante.</p>
</li>
</ul>
</li>
</ul>
</div>
<script src="script/main.js"></script>
</body>
</html>