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