Membuat Toggle Button dengan JQuery

Posted on 16. Dec, 2009 by Cheyuz in Tutorial, _other, jquery

Pada postingan yang lalu, kita udah mengenal JQuery dan mengetahui cara bikin fade in dan fade out pada suatu halaman web dengan menggunakan JQuery..

Jika waktu itu kita menggunakan 2 tombol, yaitu tombol tampilkan dan sembunyikan, maka kali ini kita akan menggunakan tombol toggle, yaitu tombol yang berfungsi untuk menangani 2 fungsi tertentu atau lebih. Dengan menggunakan toggle, kasus yang kemarin bisa ‘dihandle’ dengan menggunakan satu tombol toggle aja…

Jangan lupa untuk memanggil terlebih dahulu script Jquery di bagian header, bisa dilihat di link ini: Mengenal JQuery

Pertama-tama, kita bikin dulu sebuah button dengan class tombol (sebenernya ada 2 buah, tetapi tombol yang satu lagi ga keliatan ato hidden), kode html-nya kayak gini:

<body>
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
</body>

Seperti yang terlihat di atas, ada 2 tombol… dan mempunyai class yang sama, jadi kedua tombol itu akan dijadikan sebuah tombol toggle, yang artinya klo tombol yang pertama diklik, maka tombol yang kedua akan tampil, sedangkan tombol yang pertama akan hilang (hidden), dan begitu sebaliknya.. itu konsep sederhana toggle..

Dan perlu diperhatikan, tombol lain harus diberi style style untuk display yang bernilai ‘none’ yang artinya tidak bisa terlihat..

OK, untuk membuktikan bahwa tombol tersebut bisa dijadikan toggle, tambahkan script berikut sebelum elemen button. Seperti ini:

<body>
    <script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(".tombol").toggle();
        });
    });
    </script>
 
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
</body>

Jika tombol yang pertama diklik, maka dia akan hidden, sedangkan tombol yang kedua akan muncul, dan sebaliknya.. bila tombol yang kedua muncul dan diklik, maka tombol satu akan muncul, tombol 2 akan hidden… dan seterusnya.

Dan perlu diingat, klo kita ingin 2 elemen dijadikan 1 toggle button, maka yang berperan di jquery/yg dapat dimanipulasi jquery adalah class, bukan id. Jadi kita memberi class ‘tombol’ di masing-masing button. Dan perlu diperhatikan juga, jangan memakai this di objek yang merupakan isi dari fungsi jquery, misal seperti berikut:

    <script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(this).toggle();
        });
    });
    </script>

Kalo temen2 bikin kayak script tersebut, bisa sih bisa cuman ngga ngerubah elemen menjadi tombol yang kedua, yang ada malah jadi hilang keduanya…

Nah, ceritanya si tombol tersebut akan menghandle sebuah foto menjadi foto lain secara bergantian ketika tombol tersebut diklik..
kita tambahkan sebuah gambar di bawah tombol.

<img class="gambar" src="foto.jpg" />

Karena gambar juga akan tampil bergantian dengan gambar lain kalo diklik, maka tambah lagi 1 gambar di bawah foto.jpg.

<img class="gambar" src="foto.jpg" />
<img class="gambar" src="foto2.jpg" style="display:none" />

Tambahkan juga script jquery yang tadi menjadi seperti ini:

<script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(".gambar").toggle('fast');
            $(".tombol").toggle();
        });
    });
</script>

Di situ terlihat ada parameter di fungsi toggle yaitu bernilai ‘fast’, yang berarti akan di-toggle dengan ditambahkan animasi yang cepat, jika diberi nilai ’slow’, maka animasi akan bergerak lambat.

Jadi, kode html semuanya kira2 seperti ini:

<body>
    <script>
        $().ready(function(){
            $(".tombol").click(function(){
                $(".gambar").toggle('fast');
                $(".tombol").toggle();
            });
        });
    </script>
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
    <img class="gambar" src="foto.jpg" />
    <img class="gambar" src="foto2.jpg" style="display: none" />
</body>

Jadi, ketika nanti muncul sebuah button dengan label “foto 2″ dan foto yang muncul adalah foto pertama, maka ketika diklik button tersebut, maka label button akan berubah menjadi “foto 1″ dan foto akan menjadi foto yang kedua, bisa diklik berulang-ulang.
untuk DEMO, silakan klik DI SINI!

Tags: jquery, Tutorial, Web Developing