Tutorial Belajar Bootstrap 4 Untuk Pemula #11 : Collapse

Tutorial Belajar Bootstrap 4 Untuk Pemula #11 : Collapse

Kembali lagi di seri tutorial belajar bootstrap 4 untuk pemula. Pada tutorial sebelumnya kita telah membahasa bagaimana cara membuat carousel pada bootstrap 4. Silahkan baca artikel sebelumnya terlebih dahulu jika kamu belum tau apa itu carousel di bootstrap 4.

Sekarang kita akan mencoba collapse pada bootstrap 4. Sebelum membahas lebih jauh ada baiknya kita tahu dulu apa sih itu collapse.

Collapse Bootstrap 4

Collapse pada bootstrap 4 merupakan tampilan yang berfungsi untuk menampilkan tampilan lainnya jika di klik dan memiliki efek animasi saat membuat ataupun menutupnya.

Supaya lebih jelasnya lagi berikut ini contoh collapse bootstrap 4

Berikut script collapse bootstrap 4 :

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Maka jika di klik pada menu Link with href maka akan muncul sebuah tampilan yang sebelumnya tidak ada dan memiliki efek transisi masuk fade dan lainnya.

Berikut hasil jika menu Link with href di klik .

Collapse dengan target lebih dari 1

ada juga jenis collapse yang ketika di klik akan menampilkan lebih dari 1 tampilan yang bersembunyi sebelumnya. berikut ini collapse dengan target lebih dari 1.

Kode nya dibawah ini :

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Dan jika tombol 1 diklik maka akan keluar 1 tampilan dari ketika kita klik tombol yang ke 2 maka akan muncul tampilan lainnya tepat disebelah tampilan pertama.

Collapse jenis accordion

kali ini collapse jenis accordion yang bisa kita artikan dari namanya sendiri tampilan dengan bentuk layaknya alat musik akordion yang ketika dibuka akan membentuk lipatan-lipatan lainnya.

Untuk lebih jelasnya berikut contoh collapse jenis accordion ketika ditutup dan dibuka.

Untuk scriptnya silahkan copy kode dibawah ini :

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Javascript Collapse

untuk menggunakan collapse dengan beberapa jenis diatas kamu perlu menambahkan javascript. Javascript untuk collapse seperti ini :

$('#myCollapsible').collapse({
  toggle: false
})

Keterangan : jangan lupa sesuaikan data target yang defaultnya dengan id #myCollapsible dengan id ataupun class yang kamu miliki.

Akhir Kata

Itulah bagimana cara membuat collapse yang bisa kita gunakan untuk website atau blog kita pada bagian kategori, popular post, ataupun bagian lainnya supaya menjadi lebih menarik dan lebih rapi lagi karena dilipat dengan beberapa accordion dan pastinya menghemat ruang dalam halaman website. jangan lupa baca seri tutorial belajar bootstrap 4 untuk pemula lainnya ya.

Afrizatul Rizki
Lulusan Universitas Islam Riau jurusan Teknik Informatika yang hampir 24 jam melakukan kegiatan di depan komputer seperti menulis artikel teknologi di blog Afrizatul.com