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:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Accordion Demo</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<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>
<style type='text/css'>
body { font-family: Arial; font-size: 16px; }
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;
}
</style>
</head>

<body>
<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>
</body>
</html>

Resource by: http://snipplr.com/