Belajar Bootstrap (18. Collapse)

Belajar Bootstrap (18. Collapse)

Collapse dalam bootstrap

Collapse yaitu suatu fungsi yang kita gunakan untuk menyembunyikan dan menampilkan suatu konten.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>belajar collapse</title>
</head>
<body>
	<div class="container">
		<h2>dasar collapse</h2>
		<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#coba">
			collapse sederhana
		</button>
		<div id="coba" class="collapse">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
		
		<h2>kita juga bisa menggunakan link</h2>
		<a href="#coba2" data-toggle="collapse">menggunakan link</a>
		<div id="coba2" class="collapse">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>

		<h2>menambahkan in, untuk menampilkan terlebih dahulu, karena collapse secara default tersembunyi </h2>
		<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#coba3">
			menambahkan in
		</button>
		<div id="coba3" class="collapse in">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
		<h2>mari kita kreasikan dengan panel-collapse</h2>
		<div class="panel-group"> 
			<div class="panel panel-info ">
				<div class="panel-heading">
					<h4><a href="#coba4" data-toggle="collapse">kreasi 1</a></h4>
				</div>
				<div id="coba4" class="panel-collapse collapse">
				<div class="panel-body">panel body</div>
					<div class="panel-footer ">panel footer</div>
				</div>
			</div>
		</div>

		<h2>kalo yang satu ini kita kreasikan dengan menambahkan list group</h2>
		<div class="panel-group">
			<div class="panel panel-warning">
				<div class="panel-heading">
					<h4 class="panel-title"><a href="#coba5" data-toggle="collapse">kita bisa</a></h4>
				</div>
				<div id="coba5" class="panel-collapse collapse">
					<ul class="list-group">
						<li class="list-group-item">item 1</li>
						<li class="list-group-item">item 2</li>
						<li class="list-group-item">item 3</li>
					</ul>
				</div>
				<div class="panel-footer">
					footer
				</div>
			</div>
		</div>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *