Simple Show Hide DIV using Script & CSS3

Membuat Show Hide DIV Menggunakan Javacript dan CSS3

Flag Counter

$(document).ready(function () {
$('#GRsh_object').hide();
$('a#GRsh-button').click(function () {
$('#GRsh_object').toggle(0);
});
});

Silahkan anda coba dulu demo di atas!

Berbeda dengan show hide content yang dibuat menggunakan javascript di posting sebelumnya, show hide div di atas dibangun tanpa menggunakan jQuery. Dengan kegunaan, show hide DIV ini terhitung relatif sangat simple karena hanya menggunakan beberapa deret script saja. Agar mempunyai tampilan yang manis kita libatkan background CSS3 setra border-radius dan box-shadow. Anda bisa menggunakan show hide ini sebagai wadah image (gambar), teks atau konten lainnya.

Javascript Show Hide DIV

<script type='text/javascript'>
if(typeof(GRsh) == 'undefined') var GRsh = '';
GRsh = Math.floor(Math.random()*1000);
GRsh = 'id-' + GRsh;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + GRsh + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
</script>

Kode CSS Show Hide DIV

<style type="text/css">
.GRshowhideDIV{
       border:1px solid #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;
}
.GRshowhideDIV:active{
       outline:none;
}
.GRshowhideDIV span{
       display:block;
       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;
}
</style>

xHTML Show Hide DIV

<center>
<div class="GRshowhideDIV">
<span>Flag Counter<br />
<img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/Show-HideH115V34.jpg" width="115" height="36" style="margin:0 auto;display:block;text-align:center;" /></span>
<script type='text/javascript'>
document.write('<div id="' + GRsh + '" style="display:none;">');
</script>
<p>
<!-- Letakkan konten (image, teks atau kode html) di sini !! -->
<a href="http://widgets.tcimg.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;padding:0;" /></a>
<!-- Letakkan konten (image, teks atau kode html) di sini !! -->
</p>
</div>
</center>

1. Untuk menyesuaikan lebar Show Hide DIV hapus kode width:400px; atau bisa juga dengan merubah nilainya (400px). Semakin besar maka semakin lebar.
2. Anda bisa menyimpan seluruh kode dalam box gadget HTML/Javascript.
3. Jika ingin penyimpanan terpisah:
   • Simpan Javascript di atas kode </head>
   • Simpan kode CSS di atas kode ]]></b:skin>
   • Gunakan xHTML di antara tag body atau dalam box gadget HTML/Javascript.
4. Ganti URL image yang ada dalam show hide DIV dengan cara upload melalui halaman posting blogger. Menggunakan image yang diupload di blog anda akan lebih aman dan sangat berpengaruh besar terhadap kecepatan loading blog.
5. Untuk menyimpan kode Show Hide DIV anda bisa membaca panduan berikut sebagai referensi:
   Tutorial : Cara simpan kode CSS