Contoh Accordions dan Transitions

<style>
#demo_catatan _si_ugi {
margin: 0 auto;
width: 500px;
}
#demo_catatan _si_ugi a {
background-color: #456;
box-shadow: 0 0 4px #ABC inset;
display: block;
font-size: 16px;
height: 2em;
line-height: 2em;
margin: 1px 0;
padding-left: 20px;
}
#demo_catatan _si_ugi a:hover {
box-shadow: 0 0 12px #ABC inset;
color: #EEE;
}
#demo_catatan _si_ugi div {
overflow:hidden;
text-align: center;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#demo_catatan _si_ugi div.visible {
border: 1px solid #456;
height:100px;
}
#demo_catatan _si_ugi div.novisible {
border: 1px solid transparent;
height:0px;
}
</style>

<div id="demo_catatan _si_ugi">
<a onclick="sibolokotomo('Pertama');" href="javascript:void(0);">Pertama</a>
<div id="Pertama" class="visible">
<p> ....... Konten Anda disini ....... </p>
</div>
<a onclick="sibolokotomo('Kedua');" href="javascript:void(0);">Kedua</a>
<div id="Kedua" class="novisible">
<p> ....... Konten Anda disini ....... </p>
</div>
<a onclick="sibolokotomo('Ketiga');" href="javascript:void(0);">Ketiga</a>
<div id="Ketiga" class="novisible">
<p> ....... Konten Anda disini ....... </p>
</div>
</div>

<script>
//<![CDATA[
var buka = "Pertama";
function sibolokotomo(tutup) {
var terbuka = document.getElementById(tutup);
var tertutup = document.getElementById(buka);
if(terbuka==tertutup) {return false;}
tertutup.className="novisible";
terbuka.className="visible";
buka = tutup;
}
//]]>
</script>