Simple jQuery Show Hide DIV with UI Effect

Jika hanya menggunakan jQuery-1.3.2.js maka "Spoiler" atau "Show/Hide DIV" hanya mempunyai efek tertentu. Agar beberapa efek lain bisa digunakan kita perlu tambahkan jQuery UI. Script ini juga tidak terlalu banyak, bahkan jika anda ingin membuatnya lebih ringan bisa gunakan compress javascript (UI.min.js). Berbagai efek baru yang dapat digunakan setelah kita gunakan jQuery UI adalah: linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce dan easeInOutBounce.

D E M O
Demo ini menggunakan salah satu efek yang tersedia dalam jQuery UI (easeOutBounce). Anda dapat mengganti dengan efek yang lain seperti yang terlihat dalam daftar efek di atas.

Title Here

Tuliskan teks, kode html image, widget atau kode html lainnya di antara tag <div class="GRshuibox"> dan tag penutupnya (</div>)

Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.GRuishowhideDIV = function (a) {
        a = jQuery.extend({
                speed: 1200,
                easing: "easeOutBounce"
        }, a);
        caller = this;
        if ($(caller).css("display") == "none") {
                $(caller).animate({
                        opacity: 1,
                        height: "toggle"
                }, a.speed, a.easing)
        } else {
                $(caller).animate({
                        opacity: 0,
                        height: "toggle"
                }, a.speed, a.easing)
        }
};
$(document).ready(function () {
        $(".GRshcontroll").click(function () {
                $(this).next().GRuishowhideDIV();
                return false
        })
});
//]]>
</script>

Kode CSS:

.GRshowhideui{
       border:1px solid #666;
       background: rgb(28,28,28);
       backgrund:linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
       background:-o-linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
       background:-moz-linear-gradient(top, rgb(28,28,28) 0%, rgb(73,73,73) 17%, rgb(48,48,48) 62%, rgb(19,19,19) 100%); 
       background:-webkit-linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%); 
       background:-ms-linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#131313',GradientType=0 ); 
       padding:2px;
       margin:20px auto;
       width:400px;
}
.GRshowhideui a.GRshcontroll{
       color:#eee;
       display:block;
       padding:0;
       text-align:center;
       margin:0 auto;
       font-size:16px;
       font-family:Serif;
       padding:4px 10px;
       border:1px solid #888;
       margin:0;
}
.GRshowhideui a.GRshcontroll:hover{color:#F00;}
.GRshowhideui a.GRshcontroll:active{outline:none;}
.GRshowhideui .GRshuibox{
       display:none;
       padding:10px 15px;
       border:1px solid #888;
       text-align:left;
       line-height:18px;
       font-size:12px;
       color:#eee; /* code by: gubhugreyot */
       text-shadow:1px 1px 1px #000;
}

xHTML:

<div class="GRshowhideui">
<a href="#" class="GRshcontroll">Title Here<br /><img src="http://gubhugreyotprojects.googlecode.com/svn/gubhugreyot_Show-HideH115V34.jpg" width="115" height="36" style="margin:2px auto;" /></a><div class="GRshuibox">
Tuliskan teks, kode html image, widget atau kode html lainnya di antara tag <div class="GRshuibox"> dan tag penutupnya (</div>). <br /><br /><div align="center">
<a href="http://jQueryprojects.blogdetik.com/" title="Teks title"><img height="221" width="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-P3bTiY3i80meiKK1LjPVJ08czzNLDC5ma2odvAswMWEFLPrKWhYrMfr7nh9Z1tHX-6vQeV3xsEna8XxrPfmuesG0wpKH6vVE7r5sufXdXxT40HlefRcoK8OWss_TcRgAYDU80fup0edF/s320/gubhugreyot-my-profile.jpg" /></a></div>
</div>
</div>

Cara Menggunakan kode

1. Simpan javascript di bawah kode <head>
2. Simpan kode css di atas kode ]]></b:skin>
3. Gunakan xHTML di box posting atau Add a Gadget | HTML/Javascript atau bagian yang lain dari blog di antara tag pembuka body (<body>) dan penutupnya (</body>).
4. Anda bisa mengganti lebar show/hide DIV dengan merubah nilai width:400px; dengan nilai yang sesuai dengan lebar kolom yang tersedia.