Cara Membuat Tombol Collapse Sederhana Dengan Bootstrap

Kali ini saya ingin berbagi tentang tutorial tombol collapse sederhana dengan bootstrap. Langsung saja teman-teman.

Ketikkan markup berikut:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

</head>

<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="bootstrap-3.3.4-dist/js/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>

<body>

<div class="container">

   <div class="col-md-6">

<button class="btn btn-success" data-toggle="collapse" data-target=#collapse-button>Click Me</button>

       <div id="collapse-button" 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.

       </div>

   </div>

</div>

</body>

</html>

Penjelasan:

• Baris merah yang ada pada markup HTML, wajib ada.
• Baris hijau markup sederhana yang digunakan untuk membuat tombol collapse dan kontennya.
• Id=”collapse-button” nantinya dipanggil pada data-target, sehingga menjadi data-target=”#collapse-button”

Hasilnya:

Button yang di-klik akan ter-collapse:

Bagaimana teman-teman? Sangat mudah kan? Semoga bermanfaat… terima kasih.