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');
  }
}

Open Fiddle

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');
  }
}

Open Fiddle

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');
      }
    }
  }
}

Open Fiddle

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