Teknik Toggle Pada JQuery

Teknik toggle jquery adalah teknik untuk menyembunyikan/menampilkan suatu element, disini saya mempunyai sebuah button dengan id btntoggle, dan sebuah div dengan id divtoggle.

Berikut ini adalah sourcecode nya:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btntoggle").click(function(){
        $("#divtoggle").toggle();
    });
});
</script>

<button id="btntoggle">Klik Disini Untuk Menyembunyikan/Menampilkan Paragrap</button>

<div id="divtoggle">Ini Paragrapnya Yang Mau Di Sembunyikan/Tampilkan</div>

Penjelasan:

1. Konsepnya ketika btntoggle di klik maka divtoggle akan Di Sembunyikan/Tampilkan.
2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>: ini diperlukan untuk memanggil jquery.
3. $("#btntoggle").click(function(): dibaca jika di click maka.
4. $("#divtoggle").toggle(): dibaca toggle id divtoggle

Catatan:

1. id pada jquery/javascript ditandai dengan #, sedangkan class dengan tanda .(titik)
2. anda bisa memperlambat toggle dengan menambahkan angka pada toggle() menjadi  toggle(1000), anda bisa mengubah angka 1000 tersebut sesuai selera anda.

Semoga Bermanfaat, silahkan bertanya di kolom komentar :-D

Author : Resep Masakan Mantap

Share this

Related Posts