Cara Membuat Show Hide DIV dengan Efek menggunakan jQuery
Flag Counter
show/hide
Anda bisa menuliskan teks, kode html, widget, image atau yang lain di sini. Semua yang berada dalam DIV dengan id=GRshObject anya akan terlihat ketika button Show/Hide di "klik". Jika anda ingin membuat Show Hide DIV tanpa jQuery silahkan cari tepat sebelum posting ini!
Efek animasi saat box konten membuka dan menutup yang disertai fade effect terjadi karena penggunaan jQuery animated toggle.
jQuery-Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#GRshObject').hide();
$('a#GRshButton').click(function () {
$('#GRshObject').toggle(600);
});
});
</script>Kode CSS:
<style type="text/css">
.GRshbox{
border:1px outset #888;
width:400px;
background:#474747;
background:-moz-linear-gradient(top, #474747 0%, #595959 8%, #8e8e8e 36%, #8c8c8c 43%, #777777 59%, #595959 93%, #b2b2b2 97%, #7a7a7a 100%);
background:-webkit-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);background:-o-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
background:-ms-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
background:linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#7a7a7a',GradientType=0 ); padding:2px;margin:5px 2px;text-align:center;
}
.GRshbox p.GRshHeader{
box-shadow:0 0 4px #999;
border-radius:3px;
font-size:16px;
font-family:Serif;
color:#fff;
text-shadow:1px 1px 1px #000;
padding:4px;
border:1px solid #555;
border-right-color:#333;
border-top-color:#333;
margin:4px 5px;
}
a#GRshButton{
display:block;
width:115px;
height:36px;
margin:0 auto;
text-align:center;
background:url('http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/Show-HideH115V34.jpg') center no-repeat;
text-indent:-9999px;
color:transparent;
cursor:pointer;
}
#GRshObject{
padding:10px;
margin:10px 0;
color:#eee;
text-shadow:1px 1px 1px #000;
text-align:left;
max-height:200px;
overflow:auto;
}
</style>xHTML:
<div class="GRshbox">
<p class="GRshHeader">Flag Counter<br /><a id="GRshButton">show/hide</a></p>
<div id="GRshObject">
Anda bisa menuliskan teks, kode html, widget, image atau yang lain di sini. Semua yang berada dalam DIV dengan <b>id=GRshObject</b> hanya akan terlihat ketika button Show/Hide di "<i>klik</i>". Jika anda ingin membuat Show Hide DIV tanpa jQuery silahkan cari tepat sebelum posting ini!<p>
<a href="http://gubhugreyot.blogdetik.com/" target="_blank"><img border="0" height="92" width="242" src="http://4.bp.blogspot.com/-NK9kbuigZ38/Tv14OrfGMcI/AAAAAAAAA9E/_dCJuMqFvx4/s400/flag-counter.jpg" style="margin:0 auto;display:block;text-align:center;;padding:0;" /></a></p>
</div>
</div>- Letakkan dan simpan jQuery dan Javascript di bawah tag <head>
- Letakkan dan simpan Kode CSS di atas kode ]]></b:skin>
- Gunakan xHTML di dalam boks posting atau dibagian yang lain blog.
0 comments:
Post a Comment