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.

Posting Komentar

Daftar Situs Idn Poker Online di 18Dewa dan juga Poker Qiu atau di sebut Pokerqiu adalah situs ceme online terpercaya sama dengan 18Dewapoker dan situs poker pkv yang terkenal adalah Masterdomino88 atau nama lain Domino88 bersaing di dunia game online poker Bandar389 dan poker idn lainnya yang memberikan kemenangan tinggi yaitu Big Poker88 baru lagi agen poker bernama Rekan Poker yang punya banyak peluang besar.