tRikSonic
Tema
/ / Bootstrap 3 Collapse - Tutorial Bootstrap Indonesia

Bootstrap 3 Collapse - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 06.05
/ / Bootstrap 3 Collapse - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Collapse

TrikSonic - Bootstrap Collapse merupakan Metode yang digunakan untuk menampilkan dan menyembunyikan konten secara flexsibel yang dipicu oleh user, biasanya pemicunya adalah metode klik pada element.
Catatan : Penggunaan jQuery dan Bootstrap JavaScript diperlukan untuk metode ini.

Dasar Penggunaan Collapse

Dasar penggunaan Collapse adalah sebagai berikut :
  1. Element pemicu : gunakan Attribute data-toggle="collapse" dan Attribute data-target="#elementID"
    • data-toggle="collapse" : bersifat Wajib dituliskan
    • data-target="#elementID" : tanda yang berstabilo menyesuaikan dangan Attribute ID dari target Collapse
  2. Element Target : element target collapse harus mempunyai attribute ID beserta dengan nilai valuenya, nilai dari value ini akan menjadi patokan pada element pemicu, serta tambahkan class .collapse sebagai class dasarnya

Contoh :

<button class="btn btn-primary" data-toggle="collapse" data-target="#mydiv">Collapse</button>

<div id="mydiv" class="collapse">
Lorem ipsum dolor sit amet,
rebum doctus vivendo no vel,
ferri diceret eu eam,
ea melius aperiam ponderum duo.
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>

<h2>Bootstrap 3 Collapse</h2>


<button class="btn btn-primary" data-toggle="collapse" data-target="#mydiv">Collapse</button>

<div id="mydiv" class="collapse">
Lorem ipsum dolor sit amet, 
rebum doctus vivendo no vel, 
ferri diceret eu eam, 
ea melius aperiam ponderum duo.
</div>


<!-- jQuery, bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Collapse dengan element HTML <a>

Untuk menjalankan efek collapse dengan menggunakan element HTML <a> sebagai pemicu ada 2 cara :
  1. Cara pertama : Cukup menggunakan attribute href yang berisi nilai ID target
  2. Cara Kedua dengan tetap menggunakan attribute data-target="#elementID"

Contoh :

<a href="#mydiv" class="btn btn-primary" data-toggle="collapse">
Collapse 1
</a>

<a href="javascript:void(0);" class="btn btn-info" data-toggle="collapse" data-target="#mydiv2">
Collapse 2
</a>

<div id="mydiv" class="collapse">
<strong>Collapse 1</strong> - Lorem ipsum dolor sit amet, 
rebum doctus vivendo no vel, 
ferri diceret eu eam, 
ea melius aperiam ponderum duo.
</div>

<div id="mydiv2" class="collapse">
<strong>Collapse 2</strong> - Lorem ipsum dolor sit amet, 
rebum doctus vivendo no vel, 
ferri diceret eu eam, 
ea melius aperiam ponderum duo.
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<h2>Bootstrap 3 Collapse</h2>

<a href="#mydiv" class="btn btn-primary" data-toggle="collapse">
Collapse 1
</a>

<a href="javascript:void(0);" class="btn btn-info" data-toggle="collapse" data-target="#mydiv2">
Collapse 2
</a>

<div id="mydiv" class="collapse">
<strong>Collapse 1</strong> - Lorem ipsum dolor sit amet, 
rebum doctus vivendo no vel, 
ferri diceret eu eam, 
ea melius aperiam ponderum duo.
</div>

<div id="mydiv2" class="collapse">
<strong>Collapse 2</strong> - Lorem ipsum dolor sit amet, 
rebum doctus vivendo no vel, 
ferri diceret eu eam, 
ea melius aperiam ponderum duo.
</div>


<!-- jQuery, bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Collapse in

Sebuah metode yang digunakan untuk menampilkan target collapse pada saat pertama kalinya.
Secara default class .collapse memiliki tampilan tidak terlihat, untuk menampilkannya gunakan class .in dan letakkan setelah class dasar .collapse

Contoh :

<button class="btn btn-default" data-toggle="collapse" data-target="#mydiv">Collapse</button>

<div id="mydiv" class="collapse in">
Lorem ipsum dolor sit amet,
rebum doctus vivendo no vel,
ferri diceret eu eam,
ea melius aperiam ponderum duo.
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<h2>Bootstrap 3 Collapse In</h2>

<button class="btn btn-default" data-toggle="collapse" data-target="#mydiv">Collapse</button>

<div id="mydiv" class="collapse in">
Lorem ipsum dolor sit amet,
rebum doctus vivendo no vel,
ferri diceret eu eam,
ea melius aperiam ponderum duo.
</div>


<!-- jQuery, bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Collapse pada sebuah Panel

Metode yang digunakan untuk meciptakan efek collapse pada sebuah Panel.

Contoh :

<div class="panel panel-default">
  <div class="panel-heading">
    <a class="panel-title" data-toggle="collapse" href="#mydiv">Collapse Panel</a>
  </div>
  <div id="mydiv" class="collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<h2>Bootstrap 3 Collapse Panel</h2>

<div class="panel panel-default">
  <div class="panel-heading">
    <a class="panel-title" data-toggle="collapse" href="#mydiv">Collapse Panel</a>
  </div>
  <div id="mydiv" class="collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

<!-- jQuery, bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Bootstrap Accordion

Bootstrap Accordion merupakan metode yang digunakan untuk menampilkan dan menghilangkan sebuah element secara bergantian dan dinamis, maksudnya jika salah satu element terpicu untuk ditampilkan, maka element yang lainnya akan terotomatis akan menghilang atau tersimpan.
Untuk menerapkannya tambahkan attribute data-parent="#elementID" pada element pemicu.
Tanda yang berstabilo diatas merupakan nilai attribute ID dari element pembungkus utama, sesuaikan dengan ID yang digunakan

Contoh :

<div class="panel-group" id="mycontainer">

  <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <a data-toggle="collapse" data-parent="#mycontainer" href="#panel-1">Panel 1</a>
    </div>
    <div id="panel-1" class="collapse">
      <div class="panel-body">Konten panel 1</div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <a data-toggle="collapse" data-parent="#mycontainer" href="#panel-2">Panel 2</a>
    </div>
    <div id="panel-2" class="collapse in">
      <div class="panel-body">Konten panel 2</div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <a data-toggle="collapse" data-parent="#mycontainer" href="#panel-3">Panel 3</a>
    </div>
    <div id="panel-3" class="collapse">
      <div class="panel-body">Konten panel 3</div>
    </div>
  </div>
  
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<h2>Bootstrap 3 Acordeon</h2>

<div class="panel-group" id="mycontainer">

  <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <a data-toggle="collapse" data-parent="#mycontainer" href="#panel-1">Panel 1</a>
    </div>
    <div id="panel-1" class="collapse">
      <div class="panel-body">Konten panel 1</div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <a data-toggle="collapse" data-parent="#mycontainer" href="#panel-2">Panel 2</a>
    </div>
    <div id="panel-2" class="collapse in">
      <div class="panel-body">Konten panel 2</div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <a data-toggle="collapse" data-parent="#mycontainer" href="#panel-3">Panel 3</a>
    </div>
    <div id="panel-3" class="collapse">
      <div class="panel-body">Konten panel 3</div>
    </div>
  </div>
  
</div>

<!-- jQuery, bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

 
Loading.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.