◄ Min  Size Fonts: + | - | ± Color: Max ►

Accordion jQuery Plug-In

Lahan diblog semakin sempit? saatnya kreatifitas kita dituntut untuk mengoptimalkan jQuery Plug-in :D ;)) Dengan trik yang akan Beben si bloglang ganteng kalem tea beberkan ini mengenai simple accordion. Baca dan tengok live demo yang sudah pernah master Abu Farhan posting mengenai the best accordion for blogger :-bd Kalau disana master Abu Farhan menggunakan script tambahan dalam penggunaan accordionnya :-/
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'/>
Kalau sekarang mah, full 100% plug-in with jQuery :-" Diharuskan sudah memiliki script Jquery:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>Jika sudah ada tidak usah dipakai lagi, bikin nambru`u sob :)) Letakin script plug-in ini diatas tag </body> atau dibawah tepat script jQuery/1.4.2
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
//]]>
</script>

Kode CSS

Letakin seperti biasa sebelum kode ]]></b:skin>
dl {
width: 100%;
}
dl,dd {
margin: 0;
}
dt {
background: #555555;
border-bottom: 2px solid #000000;
font-size: 18px;
padding: 5px;
margin: 0;
}
dt a {
color: #FFF;
display:block;
text-align:center;
text-decoration: none;
}
dt a:hover {
background-color: #AA0000;
}
dt a:active {
background-color: #ffff00;
color: #AA0000;
}
dd a {
color: #000;
}
ul {
list-style: none;
padding: 5px;
}
Kalau suka dan mengerti CSS silahkan berkreasi sendiri :P Masukin HTML ini pada <body> template sobat. Jika mau dimasukin disidebar blog sobat, tinggal otak-atik ID CSSnya saja :D
<dl>
<dt><a href="#">jQuery</a></dt>
<dd>
<ul>
<li><a href="#">BLAH</a></li>
<li><a href="#">BLEH</a></li>
<li><a href="#">BLOH</a></li>
</ul>
</dd>
<dt><a href="#">Plug-In</a></dt>
<dd>
<ul>
<li><a href="#">BLAH1</a></li>
<li><a href="#">BLEH1</a></li>
<li><a href="#">BLOH1</a></li>
<li><a href="#">BLUH1</a></li>
</ul>
</dd>
<dt><a href="#">Development</a></dt>
<dd>
<ul>
<li><a href="#">BLAH2</a></li>
<li><a href="#">BLEH2</a></li>
<li><a href="#">BLOH2</a></li>
</ul>
</dd>
</dl>

Save

Secara keseluruhan tampak sbb: Click Here for Custom Model Window

Resource by: http://snipplr.com/

Loading...
XAccordion jQuery Plug-In

Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE