![[jQuery] Show() Hide() dan Toggle Empty](https://2img.net/i/empty.gif)
7th May 2014, 2:43 pm
![[jQuery] Show() Hide() dan Toggle GTrNrDD](https://i.imgur.com/GTrNrDD.png)
Sebelum pakde menggunakan script ini, website pakde wajib sudah tertanam Framework jQuery
jika belum tertanam silahkan tanam dahulu dengan cara:
- Copy jQuery dibawah ini
- Code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
- Cari kode </head>
- Lalu pastekan kode tepat diatas kode </head>
- Simpan
Javascript:
- Code:
$('.erc-show-hide').toggle(function() {
$(this).text('Show');
$('#target').slideUp();
}, function() {
$(this).text('Hide');
$('#target').slideDown();
});
CSS:
- Code:
.erc-show-hide {
background:#56af2e;
color:white;
text-align:center;
padding:8px 12px;
font-family:Tahoma, Verdana;
font-size:13px;
border-radius:5px;
cursor:pointer;
}
#target {
background:#1f57a3;
height:150px;
margin-top:15px;
display:none;
}
Penulisan penggunaan HTML:
- Code:
<span class="erc-show-hide">Show</span>
<div id="target" style="display: none;">www.erchima.net</div>
Demo:
<a href="http://www.erchima.net/h10-demo-jquery-toggle-show-hide" target="blank"><button>Demo JQuery () Show Hide</button></a>
Selamat mencoba
Credit: [You must be registered and logged in to see this link.]
![[jQuery] Show() Hide() dan Toggle Top10](https://i.servimg.com/u/f21/18/79/15/92/top10.png)
