Collapsible-list/Example.html at master · bensonml/Collapsible-list · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="ul.js"></script>
	<style type="text/css">
	</style>
</head>
<body>
	<!-- just add "col_ul" class with the <ul> you want to be collapsible
		 now all the multi level <ul> will be hidden
	  -->
	<ul class="col_ul">
		<li><span>coffee</span>
			<ul>
				<li><span>paki</span>  <!-- Add <span> tag arround every multi level <li>
										so it can behave like a toggle button -->
					<ul>
						<li>karachi    <!-- It will not work because it has no span tag arround it :(
						                -->
							<ul>
								<li>North</li>
								<li>West</li>
							</ul>
						</li>
						<li>lahore</li>
					</ul>
				</li>
				<li>indian</li>
				<li>arbian</li>
			</ul>
		</li>
		<li>milk</li>
		<li>honey</li>
	</ul>
</body>
</html>