Sabtu, 04 Maret 2017

Bootstrap Collapse

Assalamualaikum Wr.Wb


Pada kesempatan kali ini saya akan berbagi tutorial bootstrap collapse,apa itu bootstrap collapse yaitu sebuah style yang di sediakan bootstrap misalnya kita mengklik suatu tombol atau link maka akan muncul element lain tanpa berpindah halaman.Baiklah mari kita mulai satu - persatu karena ada berbagai jenis collapse.

  • Basic Collapsible 
Seperti namanya basic collapsible adalah collapse yang memiliki style biasa,di sini saya menggunakan button untuk menampilkan collapse.Jadi saat tombol di klik maka akan muncul collapse nya.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Collapse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Bassic Collapsible</h2>
    <p>Klik tombol di bawah untuk menampilkan collapse</p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Klik Di Sini</button>
    <div id="demo" 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>
</div>
</body>
</html>

Berikut hasilnya sebelum di klik
 

Setelah tombol di klik maka akan muncul collapse nya


  •  Collapsible Panel
Yaitu collapsible yang ada di dalam panel atau menggunakan panel
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Collapse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Contoh Collapsible Panel</h2>   
    <p>Klik tulisan pada panel untuk membuka dan menutup collapse</p>
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1">Collapsible Panel</a>
                </h4>
            </div>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">Ini Panel Body</div>
            <div class="panel-footer">Ini Panel Footer</div>
        </div>   
        </div>
       
    </div>
</div>
</body>
</html>

Dan inilah hasilnya


 Setelah di klik maka akan muncul collapse nya seperti gambar di bawah


  • Collapsible List Group
Ini hampir sama dengan collapsible panel yang membedakan ini digunakan untuk membuat list
 <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Collapse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Collapsible List Group</h2>
    <p>Klik tulisan di dalam panel untuk membuka atau menutup collapse</p>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1">
                    Klik Untuk Melihat Menu
                    </a>                      
                    </h4>                  
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <ul class="List-group">
                        <li class="List-group-item">Bakso</li>
                        <li class="List-group-item">Soto</li>
                        <li class="List-group-item">Sate</li>
                    </ul>
                    <div class="panel-footer">Footer Menu</div>
                </div>
            </div>          
        </div>
</div>
</body>
</html>
Dan inilah hasilnya
  
Setelah di klik maka akan tampil collapse seperti di bawah ini

  
  • Accordion
Collapse Accordion ini memiliki tampilan yang serupa dengan akordion,jika salah satu di klik maka yang lain akan otomatis menutup.
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Collapse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Klik Salah Satu Collapse</h2>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapse 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">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>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapse 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">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>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapse 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">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>
      </div>
    </div>
  </div>
</div>
</body>
</html>
Dan inilah hasilnya
 
Ya itu tadi sedikit tutorial mengenai Bootstrap Collapse semoga bermanfaat,sampai jumpa di postingan berikutnya,Sekian.

Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb 
Share:

0 komentar:

Posting Komentar