HTML / CSS Pemrograman PHP Web

Cara Membuat Collapse dan Accordion pada HTML Menggunakan Bootstrap 4

February 8, 2019
dewan
8 Comments

Cara Membuat Collapse dan Accordion pada HTML Menggunakan Bootstrap 4 – Kali ini saya akan membahas lagi tentang bootstrap, dan kali ini yang saya bahas adalah collapse dan accordion. Dengan collapse sobat bisa menyembunyikan dan juga memunculkan div dengan data-toggle. Tentunya sobat bisa membuatnya sesuai kreasi sobat nantinya. Sobat juga bisa membuat accordion secara default accordion tidak ada icon plus dan minus namun sobat bisa membuatnya secara manual, nanti akan saya berikan contohnya cara membuat plus minus dengan mudah.

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

 

Cara Membuat Collapse pada PHP

Sebenarnya ini tidak hanya pada PHP karena yang penting basicnya yaitu HTML dan tidak hanya PHP yang menggunakan HTML. Dengan collapse maka sobat bisa menampilkan dan menyembunyikan suatu elemen atau menu. Untuk macamnya juga ada banyak sesuai dengan kebutuhan dan keinginan sobat sendiri bisa menggunakan link, button, gambar dan lain-lain. Berikut adalah cara membuat menu collapse :

Tentunya sebelum membuat collapse/accordion kita perlu file css/js dari bootstrap dan fontawesome. Kegunaan file dari fontawesome adalah untuk menampilkan icon plus dan minusnya Jika tidak ada tentu tidak bisa tapil iconnya. Namun jika sobat tidak ingin menggunakan fontawesome sebenarnya bisa saja nanti pada bagian incon sobat ubah menjadi simbol tambah (+) dan kurang (-) namun menurut saya itu kurang bagus. Letakkan kode dibawah diantara tag <head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

untuk js-nya bisa diletakkan di tag <head> atau tag <body> paling bawah

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Karena untuk keperluan demo supaya sobat juga bisa mengikuti tutorial ini dengan mudah maka saya contohkan css dan js online. Jika sobat ingin menggunakan untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendownloadnya bersama dengan project ini diakhir postingan.

1. Collapse Standar

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary ml-5" 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>

Yang paling penting adalah pada baris ini data-toggle=”collapse” href=”#collapseExample”, kita perlu menambahkan data-togle dan tujuannya adalah untuk membuka menu yang disembunyikan dengan elemen div yang mempunyai id=”collapseExample”. Dengan script diatas maka akan menghasilkan tampilan seperti berikut

Sobat bisa mencobanya pada demo nanti.

 

2. Collapse dengan Multiple Target

Pada collapse ini juga sama saja dengan collapse standar yaitu bisa menggunakan link dan bisa menggunakan button. Tentunya kita juga harus membaginya dengan class col terlebih dahulu. Untuk contoh kodenya adalah sebagai berikut

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#elemen1" role="button" aria-expanded="false" aria-controls="elemen1">Elemen 1</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#elemen2" aria-expanded="false" aria-controls="elemen2">Elemen 2</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#elemen3" aria-expanded="false" aria-controls="elemen3">Elemen 3</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="elemen1 elemen2 elemen3">Semua</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="elemen1">
      <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="elemen2">
      <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="elemen3">
      <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>

Jika sobat jalankan maka tampilannya akan seperti berikut

3. Accordion Standar

Pada contoh ini saya akan mencontohkan untuk membuat accordion standar bawaan bootstrap. Pada contoh ini juga saya berikan class active sehingga saat halaman pertama kali load akan ada satu yang aktif atau terbuka. Dan pada contoh kali ini saya berikan accordion group jadi yang namanya group pasti hanya ada 1 saja yang bisa dibuka. Jika sobat buka yang lainnya maka yang telah terbuka akan secara otomatis tertutup. Berikut adalah cara penulisannya

<div class="accordion" id="accordionGroup">
  <div class="card">
  	<a class="card-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
	    <div class="card-header" id="headingOne">
	        Accordion Group 1
	    </div>
    </a>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionGroup">
      <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">
  	<a class="card-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
	    <div class="card-header" id="headingTwo">
	        Accordion Group 2
	    </div>
    </a>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionGroup">
      <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">
  	<a class="card-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
	    <div class="card-header" id="headingThree">
	        Accordion Group 3
	    </div>
    </a>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionGroup">
      <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>

Hasilnya :

Pada contoh diatas hanya ada satu saja yang aktif karena kita menuliskan juga data-parent=”#accordionGroup” yang mana accordionGroup merupakan id dari accordion itu sendiri. Jika sobat ingin bisa dibuka semua maka tinggal sobat hapus saja kode itu. Untuk membuat div terbuka maka sobat hanya perlu menambahkan class .show pada divnya.

 

4. Accordion Dengan Icon Plus / Minus

Setelah melihat contoh diatas maka kita bisa saja menambahkan icon plus minus. Jika menu sedang aktif maka iconnya minus dan jika menu tidak aktif maka iconnya plus. Saya akan mencontohkan dengan penggunaan yang mudah dan saya kira mudah untuk dimengerti, berikut adalah caranya

Pertama Buat cssnya terlebih dahulu dengan memasukkan kode css dibawah ini diantara tag <head>

<style type="text/css">
	[aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {
		display: none;
	}
</style>

Kemudian pada tag <body> kita tuliskan kode berikut

<div id="accordion">
	<div class="card">
		<div class="card-header">
			<a class="card-link" data-toggle="collapse" href="#menuone" aria-expanded="false" aria-controls="menuone">
				<span class="collapsed"><i class="fa fa-plus"></i></span> 
				<span class="expanded"><i class="fa fa-minus"></i></span> 
				Menu 1
			</a>
		</div>
		<div id="menuone" class="collapse">
		  <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">
		  	<a class="card-link" data-toggle="collapse" href="#menutwo" aria-expanded="false" aria-controls="menutwo">
				<span class="collapsed"><i class="fa fa-plus"></i></span> 
				<span class="expanded"><i class="fa fa-minus"></i></span> 
				Menu 2
			</a>
        </div>
        <div id="menutwo" class="collapse">
          <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">
			<a class="card-link" data-toggle="collapse"  href="#menu3" aria-expanded="false" aria-controls="menu3">
				<span class="collapsed"><i class="fa fa-plus"></i></span> 
				<span class="expanded"><i class="fa fa-minus"></i></span> 
				Menu 1
			</a>
        </div>
        <div id="menu3" class="collapse">
          <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>

Dan jika sobat jalankan maka hasilnya akan menjadi seperti dibawah

 

Pada contoh-contoh diatas saya kira mudah untuk dipahami dan jika ada pertanyaan atau kebingungan maka sobat bisa tinggalkan komentar pada kolom komentar dibawah. Sekian postingan saya tentang Cara Membuat Collapse dan Accordion pada HTML Menggunakan Bootstrap 4. Jika ada kesalahan saya mohon maaf.

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :


Sampai jumpa pada postingan saya selanjutnya..

8 thoughts on “Cara Membuat Collapse dan Accordion pada HTML Menggunakan Bootstrap 4”

  1. Mas Jika saya ingin membuat menu collpase pada blogger berikut code HTML nya bisa dibantu

    1 berisi Soal
    a
    b
    c
    d
    e
    Pembahasan (collapse)
    1 berisi Soal
    a
    b
    c
    d
    e
    Pembahsan (collapse)

    dan seterusnya

    dan bila salah satu pembahasan diklik, lainnya tidak ikut ke show bagaimana mas

    Reply

  2. Gan gimana cara downloandnya? saya pingin liat dan memahami penggunaan html dan css nya untuk blogger

    Reply

    1. kalo buat blogger tidak perlu download tapi pake aja css dan jd online, tinggal masukin aja kode css sama js-nya yg online di tag dan tinggal pake di setiap postingan

      Reply

  3. MAS, kenapa accordion saya selalu tidak berkerja ya?
    efek dropdownya tidak berkerja

    mohon pencerahannya..

    Reply

Leave a Reply

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

six − six =