Tutorial Efek Toggle Sekelompok Element pada Joomla.

Tutorial Efek Toggle Sekelompok Element pada Joomla.

Di script ini, hanya satu element yang terbuka. Ketika suatu element diklik, maka element yang sedang terbuka akan ditutup dulu, baru membuka element child yang diklik. Apabila element yang sedang terbuka diklik, maka element tersebut ditutup.

variable yang digunakan di script tutorial berikut:
element parent = div.regular (div dengan class bernama regular);
element child = div di dalam element parent.
nama function yang digunakan: nextSlider;
teknik yang digunakan: addClass, removeClass dan check hasClass.
nama class penanda element child yang terbuka: toggleslide.
nama class penanda sementara element child yang sebelumnya dibuka: togglechecker.

// 1. Pemanggil semua element div.regular.
var myparent = document.id(document.body).getElements('div.regular');
myparent.each(function(element) {
element.addEvent('click', nextSlider);
var mynext = element.getChildren('div');
//set status semua element saat pertama, yaitu ditutup semua.
mynext.setStyle('overflow','hidden');
mynext.setStyle('height',0);
mynext.setStyle('list-style-type','none');
});


// 2. function yang dipanggil.


function nextSlider() {
//cek semua element dengan div.regular, jika ketemu yang terbuka, ditutup.
var myparentEls = document.id(document.body).getElements('div.regular');
myparentEls.each(function(element) {
var mychildEls = element.getChildren('div');
if(mychildEls.hasClass('toggleslide') == "true")
{
                        // tutup element yang terbuka.
mychildEls.removeClass('toggleslide');
mychildEls.tween('height', 0);
                        //setelah tutup, element tersebut ditandai utk cek apakah element itu jg yang di-klik.
mychildEls.addClass('togglechecker');
}
else
{
mychildEls.removeClass('togglechecker');
}
});
var mychildren = this.getChildren('div'); //ini element yang di-klik.
if(mychildren.hasClass('togglechecker') == "true") //cek apakah element yg sama
{
//True, artinya element yang ditutup = element yang diklik. tidak perlu lakukan apa-apa
mychildren.removeClass('togglechecker');
}
else
//False, maka bukalah element baru tersebut.
{
mychildren.addClass('toggleslide');
var mychildren = this.getElement('div');
mychildren.setStyle('height', 'auto');
var mychildrenSize = mychildren.getSize();
var mychildrenHeight= mychildrenSize.y;
mychildren.setStyle('height', 0);
mychildren.tween('height', mychildrenHeight);
}
// Cek semua div regular, kita hapus penanda sementara, si togglechecker.
myparentEls.each(function(element) {
var mychildEls = element.getChildren('div');
if(mychildEls.hasClass('togglechecker') == "true")
{
mychildEls.removeClass('togglechecker');
}
});
}