Tutorial Efek Toggle pada Element Joomla

Kali ini kita membuat script efek pada elemen dengan cara yang lain.

Script ini adalah untuk menampilkan element child ketika element parent di-click, dan element child akan dihilangkan ketika element parent di-click kembali.

Di metode sebelumnya, kita menambahkan event "mouseover" dan "mouseout" pada element parent, dimana masing-masing event akan memicu function yang berbeda. Kesulitan kali ini, kita menambahkan hanya satu event "click" pada element parent, dan function yang dipanggil event ini harus memeriksa status elementnya utk menentukan function apa yang di-execute, apakah akan di-"hide" atau "show".

Untuk menambahkan status yang dapat di-cek oleh function, metode yang saya gunakan adalah dengan cara menambah class penanda pada element saat di-click pertama kali, dan menghapus class penanda tersebut saat di-click kedua kalinya. Function tambahan di sini adalah untuk mengecek apakah element sudah memiliki class penanda tadi.

Script function saat di-click adalah seperti ini:

function toggleElement() {
var mychildren = this.getChildren('ul');
if(mychildren.hasClass('toggler') == "true")//cek apakah element children memiliki class penanda bernama "toggler".
{
   //jika true, sembunyikan element, hapus class penanda.
mychildren.removeClass('toggler');
mychildren.morph({'opacity':0,'filter':'alpha(opacity=0)'})
}
else
{
   //jika false, munculkan element child, tambah class penanda.
mychildren.addClass('toggler');
mychildren.morph({'opacity':1,'filter':'alpha(opacity=100)'})
mychildren.setStyle('display','block');
}
}

Dengan demikian, pembentuk script secara lengkap adalah:
1. Script pemilih element yang diberikan efek.
2. Script menambahkan event.
3. Script function yang dipanggil saat event tersebut terjadi.

//1. script pemilih element, pilih element "li" dengan class "parent"

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {
element.addEvent('click', toggleElement); //2. script menambah event, panggil function "toggleElement" saat diklik.

//set style mychildren mula-mula, yaitu dihilangkan dari layar.
var mychildren = element.getChildren('ul');
mychildren.setStyle('position','absolute');
mychildren.setStyle('opacity',0);
mychildren.setStyle('display','none');
});

//3. script function
function toggleElement() {
var mychildren = this.getChildren('ul');
if(mychildren.hasClass('toggler') == "true")
{
   mychildren.removeClass('toggler');
 mychildren.morph({'opacity':0,'filter':'alpha(opacity=0)'})
 }
 else
 {
 mychildren.addClass('toggler');
 mychildren.morph({'opacity':1,'filter':'alpha(opacity=100)'})
 mychildren.setStyle('display','block');
 }
}

This is the end of tutorial 3.