Membuat menu accordion

Cara mudah membuat menu accordion horizontal seperti gbr dibawah ini

Cara penggunaannya:

Sisipkan atau include file css dan jquery accordion di bagian sebelum </head>

Bentuk tag accordion dapat kalian modifikasi sesuai dengan kebutuhan, pada bagian ini sesuai dengan sample atau contoh yang sudah ada:

<div id="accordion">
<img src="images/streamin.png" />
<div style="width:200px;">
<h3>First pane</h3>
<p>
Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.
</p>
</div>
<img src="images/flash000.png" />
<div>
<h3>Second pane</h3>
<p>
Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.
</p>
</div>
<img src="images/streamio.png" />
<div>
<h3>Third pane</h3>
<p>
Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.
</p>
</div>
</div>

Tambahan untuk javascript animasi nya:

Jadi untuk full listing code nya dapat berupa:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>
<script src="js/jquery00.js"></script>
<link rel="stylesheet" type="text/css" href="css/standalo.css"/>
<link rel="stylesheet" type="text/css" href="css/cp-tabs-acc.css"/>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
</head>
<body>
<div id="accordion">
<img src="images/streamin.png" />
<div style="width:200px;">
<h3>First pane</h3>
<p>
Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.
</p>
</div>
<img src="images/flash000.png" />
<div>
<h3>Second pane</h3>
<p>
Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.
</p>
</div>
<img src="images/streamio.png" />
<div>
<h3>Third pane</h3>
<p>
Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.
</p>
</div>
</div>
<script>
$(function() {
$("#accordion").tabs("#accordion div", {
tabs: 'img',
effect: 'horizontal'
});
});
</script>
</body>
</html>

homepage : http://www.htmldrive.net/