cara menerapkan jquery show hidden
cara menerapkan jquery show hidden panel table .
Ini berawal saat saya melihat website http://www.w3schools.com disana saya menemukan cara sederhana membuat table bisa di hidden dan di tampilkan . sontak saya berpikir bagaimana bila diterapkan di project yang saya kerjakan ..
dan akhirnya saya pun menerapkan jquery show hidden table , inilah caranya :
pertama kita harus memiliki plugin jquery untuk manampilkan show hidden table .
untuk mendownload plugin jquery show hide klik disini !
Kemudian copy script berikut ini di file html yang ingin kita berikan jquery show hidden :
<head>
<script type="text/javascript" src="../../JQuery/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
form.panel,p.flip
{
margin:1px;
padding:5px;
text-align:center;
background:white;
border:solid 0px #c3c3c3;
}
form.panel
{
height:110px;
display:none;
}
</style>
</head>
{[Ini adalah css untuk menampilkan jquery show hidden table ]}
kode ini : <script type="text/javascript" src="../../JQuery/jquery-1.3.1.js"></script>
digunakan untuk memanggil class (.js) .
Setelah itu kita tambahkan :
<p class="flip"><i>Show/Hide Panel</i></p>
<form method="post" action="save.action" class="panel">
<table width="98%" border="1" cellspacing="0" cellpadding="3" class="formOuterBorder">
<tr bgcolor="#d0dcff">
<td class="formSecHeader" colspan="3"><center><b>Form Expenses</b></center></td>
</tr>
<tr bgcolor="#ffffff">
<td class="dataLabel" width="20%">Applicant :<font color="RED">*</font></td>
<td><input type="text" name="username" maxlength="20" value="$!username" size="30" disabled></td>
</tr>
<tr>
fungsi dari code :
<p class="flip"><i>Show/Hide Panel</i></p>
tombol yang akan nantinya dapat membuat show hidden table . dalam hal ini saya memberikan nama show / hide panel ..
berikut tampilannya :
ini nantinya bila berhasil menerapkan jquery show hidde panel maka bila di klik akan tampil data yang di show / hide panel .
Sekian Postingan dari saya kali ini ..
Terima kasih .
Comments: