Cara Membuat Tombol Show & Hide Panel Jquery

Seperti halnya Tombol Show & Hide pada umumnya,

Tombol Show & Hide Panel Jquery ini dapat juga

berfungsi untuk menyimpan apa saja yang anda ingin-

kan. Tulisan, kode, link, gambar maupun yang lainnya.

Contoh seperti yang di bawah ini :

TULISAN / KODE / LINK / GAMBAR dan lain-lain LETAKKANLAH DI SINI

Cara membuatnya seperti berikut :

1.   Masuk ke Edit HTML

2.   Cari kode </head>

3.   Letakkan di atasnya, kode yang berikut ini,
      kemudian simpanlah template anda.

<script src="jquery.js" type="text/javascript"> </script><br /> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script><br /> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#ffff00; border:solid 1px #0000ff; } div.panel { height:60px; width:350px; display:none; } </style>

KETERANGAN :

Ubahlah warna background, ukuran & warna border
sesuai dengan yang anda inginkan.

Sesuaikan juga tinggi (height) & lebar (width)
Panel-nya dengan ISI dari panel anda tersebut.

4.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript lalu masukkan kodenya :

<div align="center"><div class="flip"><button>Show/Hide Panel</button></div></div><div class="panel"><p>TULISAN / KODE / LINK / GAMBAR dan lain-lain LETAKKANLAH DI SINI</p></div>

5.  Simpan.

CATATAN TAMBAHAN :

Bila anda menemukan kode <br />
dalam kode-kode di atas, hilangkanlah kode tersebut
lalu turunkan ke bawah kode yang setelahnya.

( hal ini berlaku untuk semua kode-kode
tutorial di blog ini agar kodenya dapat berfungsi
atau bekerja sebagaimana mestinya )

Selamat mencoba, good luck!