Simple jQuery Show Hide DIV with Effect

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!

$(document).ready(function () {
$('#GRshObject').hide();
$('a#GRshButton').click(function () {
$('#GRshObject').toggle(600);
});
});

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgil7YYoajJfFaGAMWkE5jBNJ3WOZXbpiHoTGKND30HCBIspf8XiyWfSDbnoorjmxIEIeE05Y3Mq4xXJDnT3vo8VVyxQj2ANUkHiw-1Pk-I8ZybYyhdCRqigtn24SbeH_FQUiayzpHrqTA/s400/flag-counter.jpg" style="margin:0 auto;display:block;text-align:center;;padding:0;" /></a></p>
    </div>
</div>

1. Letakkan dan simpan jQuery dan Javascript di bawah tag <head>
2. Letakkan dan simpan Kode CSS di atas kode ]]></b:skin>
3. Gunakan xHTML di dalam boks posting atau dibagian yang lain blog.

jQuery Show Hide Content (jQuery Spoiler)

Silahkan klik pada Show/Hide di bawah ini untuk melihat bagaimana show hide content yang dibuat menggunakan jQuery bekerja.

Show/hide

Ini adalah sebuah contoh bagaimana show hide content bekerja. Anda bisa melihat betapa sekalipun javascript yang digunakan hanya beberapa gelintir saja, namun efek yang dihasilkan sungguh terasa sangat luar biasa. Hal-hal kecil seperti ini pastilah akan sangat menarik untuk digunakan dalam blog. Gunakanlah javascript ini bersama jQuery.1.3.2.min.js atau yang lebih baru seperti jQuery.1.7.1.js, jQuery.1.4.2.js atau jQuery.1.6.1.js. Jika blog anda selama ini sudah menggunakan salah satu dari jQuery tersebut, maka anda hanya perlu menambah javascript di bawah ini untuk membuat show hide content.

$(document).ready(function(){
     $(".GRshowhidebox").hide();
     $(".GR_showhide").show(); 
     $('.GR_showhide').click(function(){
     $(".GRshowhidebox").slideToggle(500);
   });
});

Menggunakan jQuery sebagai salah satu komponen javascript pendukung kinerja blog memang terasa sangat luar biasa. jQuery tak hanya bisa digunakan untuk satu fungsi saja. Berbagai fungsi lain dengan mudah dapat ditambahkan dan tak selalu harus dengan menambahkan lagi javascript yang kompleks atau berderet-deret memanjang. Beberapa bahkan bisa dibuat dengan tambahan satu deret script saja. Kondisi seperti ini tentu saja memberi keuntungan luar biasa bagi blogger karena setelah jQuery dilibatkan dalam template maka penggunaan javascript untuk berbagai fungsi dan kegunaan lain bisa diminimalisir hingga beban blog juga tak terlalu tertambahi. Menggunakan jQuery juga memberi keleluasaan untuk membuat desain-desain baru dengan gerak animatif tanpa perlu kode bertumpuk. Salah satu diantaranya adalah show hide content yang berfungsi menyembunyikan "sesuatu elemen posting atau elemen blog lain" dalam sebuah tag div. Dengan sebuah control yang sangat sederhana elemen tersembunyi dapat diperlihatkan (ditampilkan) dan kemudian disembunyikan lagi disertai efek show hide yang terlihat dinamis.

Untuk membuat show hide conten gunakan javascript, kode CSS dan xHTMl seperti berikut:

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(){
     $(".GRshowhidebox").hide();
     $(".GR_showhide").show(); 
     $('.GR_showhide').click(function(){
     $(".GRshowhidebox").slideToggle();
   });
});
</script>

Kode CSS:

.GRshowhidebox{
       width:400px;
       max-height:500px;
       background:#bbb;
       padding:15px 10px;
       margin:10px 0;
       border-bottom:5px double #333;
}
.GR_showhide{
       display:none;
}

xHTML:

<a href="#" class="GR_showhide">Show/hide</a><br /><div class="GRshowhidebox">
Letakkan di sini konten yang akan disembunyikan!
</div>

1. Letakkan dan simpan jQuery dan Javascript di bawah tag <head>
2. Letakkan dan simpan Kode CSS di atas kode ]]></b:skin>
3. Gunakan xHTML di dalam boks posting atau dibagian yang lain blog.