<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="jquery.accordion.js"></script>
<link rel="stylesheet" type="text/css" href="sample15.css">

<script type="text/javascript">
<!--
   jQuery().ready(function(){
      jQuery('#navigation').accordion({
         active: '.selected',
      //   active: false,
         header: '.head',
         navigation: true,
      //   event: 'mouseover',
         fillSpace: true,
      //   animated: 'easeslide'
         animated: "bounceslide",
      });
   });
//-->
</script>

<div style="height:250px;margin-bottom:1em;">
   <ul id="navigation">
      <li>
         <a class="head" href="#">Guitar</a>
         <ul>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
         </ul>
      </li>
      <li>
         <a class="head" href="#">Bass</a>
         <ul>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
         </ul>
      </li>
      <li>
         <a class="head selected" href="#">H</a>
         <ul>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
         </ul>
      </li>
   </ul>
</div>