Materialize/collapsible.html at master · magallon/Materialize · 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<title>Ejercicio en materialize</title>
		<meta name="viewport" content="width-device-width, initial-scale=1">
		<link rel="stylesheet" href="css/materialize.min.css">
	</head>

	<body>
		<div class="container">
			<div class="row">
				<h3>Elementos de acordeon</h3>
				<ul class="collapsible">
					<li>
						<div class="collapsible-header active"><i class="mdi-image-flare orange-text"></i>HTML5</div>
						<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nihil nobis expedita error, tempora nostrum, quisquam recusandae odio dolorum deserunt suscipit dolorem, quod ex laudantium, autem a cumque dignissimos harum.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header"><i class="mdi-image-flare blue-text"></i>CSS3</div>
						<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima porro eius ipsa molestias natus ullam eaque iure. Quod voluptatibus dolor deleniti sequi sed tempora deserunt facilis, ab, perferendis, corporis veritatis.</p></div>
					</li>
					<li>
						<div class="collapsible-header"><i class="mdi-image-flare yellow-text"></i>Javascript</div>
						<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, repellat nisi ut magni nostrum molestiae repudiandae quas ratione id cum saepe sit aliquid expedita, ipsa, magnam modi, incidunt maiores temporibus.</p></div>
					</li>
				</ul>

			</div>

			<div class="row">
				<h3>Elementos de acordeon-Expandible</h3>
				<ul class="collapsible" data-collapsible="expandable">
					<li>
						<div class="collapsible-header"><i class="mdi-image-flare orange-text"></i>HTML5</div>
						<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nihil nobis expedita error, tempora nostrum, quisquam recusandae odio dolorum deserunt suscipit dolorem, quod ex laudantium, autem a cumque dignissimos harum.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header"><i class="mdi-image-flare blue-text"></i>CSS3</div>
						<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima porro eius ipsa molestias natus ullam eaque iure. Quod voluptatibus dolor deleniti sequi sed tempora deserunt facilis, ab, perferendis, corporis veritatis.</p></div>
					</li>
					<li>
						<div class="collapsible-header"><i class="mdi-image-flare yellow-text"></i>Javascript</div>
						<div class="collapsible-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, repellat nisi ut magni nostrum molestiae repudiandae quas ratione id cum saepe sit aliquid expedita, ipsa, magnam modi, incidunt maiores temporibus.</p></div>
					</li>
				</ul>

			</div>
		</div>


		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   		<script src="js/materialize.js"></script>

	</body>


</html>