Skip to main content

Toggle Class Dengan Javascript

Toggle Class Dengan Javascript - Banyak kegunaan dari toggle class dengan javascript ini untuk membuat elemen-elemen blog menjadi lebih hidup dengan script yang kecil sehingga tidak terlalu membebani loading blog.

Dengan ini kita bisa membuat banyak elemen seperti image lightbox, menu bar, tab bar, show hide, dan lain-lain sesuai kreasi masing-masing.

Javascript untuk toggle class ini cukup simple, silahkan gunakan javascript di bawah ini.


var container = document.getElementsByClassName("klik");
for (var i = 0; i < container.length; i++) {
  //For each element in the container array, add an onclick event.
  container[i].onclick = function(event) {
    this.classList.toggle('active');
  }
}

Toggle class di atas bekerja ketika single elemen diklik.

Jika toggle class ingin bekerja untuk multi elemen dengan remove class ketika elemen lain diklik, silahkan gunakan javascript berikut.


var container = document.getElementsByClassName("klik");
for (var i = 0, l = container.length; i < l; i++) {
  container[i].onclick = function() {
    for (var j = 0; j < l; j++) {
      if (container[j] != this) {
        container[j].classList.remove("active");
      }
    }
    this.classList.toggle('active');
  }
}

Dan jika toggle class ingin bekerja untuk multi elemen dengan remove class ketika elemen lain diklik dan juga remove class ketika user klik di luar elemen, silahkan tambahkan javascript berikut pada javascript di atas.


window.onclick = function(event) {
  if (!event.target.matches('.klik')) {
    var dropdowns = document.getElementsByClassName("klik");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('active')) {
        openDropdown.classList.remove('active');
      }
    }
  }
}

Silahkan gunakan ini untuk mencoba membuat sesuatu di blog Anda, selamat berkreasi.


Berbagi itu peduli:

You Might Also Like:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar


PrivacySitemap
©2020 KOMPI AJAIB