Bukan Togel Tapi Toggle

25 04 2010

Togel adalah sebuah judi yang diharamkan, tapi toggle adalah sebuah animasi buka tutup heee… 😉

Untuk membuat animasi buka tutup, dimana sebuah bagian (div) yang berisi teks tertentu dapat ditampilkan dan disembunyikan.

Pada masa lampau, jika terdapat banyak teks (misalkan help sebuah aplikasi), biasanya dibikin sebuah anchor (link pada halaman yang sama), namun dengan menggunakan jQuery kita dapat membuat solusi yang lebih indah.

Untuk membedakan konten dengan judul, maka kita dapat memoles tampilan konten dengan menggunakan CSS sebagai berikut:

<style type="text/css">
.container {
background: #000;
color: #fff;
padding: 20px;
}
</style>

Jangan lupa untuk meload core jQuery, anda dapat mendownload dari situs resminya.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Langkah selanjutnya adalah mengatur bagaimana jQuery memperlakukan dokumen kita, pertama kita sembunyikan semua container (bisa juga dengan menggunakan css, display: none), kemudian kita cari objek h2 (terserah kita mau menjadikan bagian apa sebagai trigernya) dan lakukan cek fungsi klik.

Karna fungsi toggle adalah buka tutup, maka kita tidak perlu menangani event selanjutnya. Cara lain untuk membuat trik ini, bisa anda lakukan dengan cara menambahkan class active dan nonaktif dengan menggunakan bantuan css yang di atur menggunakan script.

<script type="text/javascript">
$(document).ready(function(){

//sembunyikan saat load
$(".container").hide();

//saat h2 di klik, toggle (buka/tutup) container
$("h2").click(function(){
$(this).next(".container").slideToggle("slow");
});

});
</script>

Berikut ini program utamanya :

<h2><a href="#">Tes Toggle</a></h2>
<div class="container">
<h3>Anda dapat memasukan teks disini</h3>
</div>
<h2><a href="#">Tes Toggle 2</a></h2>
<div class="container">
<h3>Anda dapat memasukan teks disini juga</h3>
</div>

Semoga membantu…  😉


Aksi

Information

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s




%d blogger menyukai ini: