n_c

作った後に知った。jQuery UI accordionがあることを…。

<ul id="accordion_example">
  <li>
     <span>2009年</span>
     <ul>
       <li>1月</li>
       <li>2月</li>
       <li>3月</li>
       <li>4月</li>
     </ul>
  </li>
  <li>
     <span>2008年</span>
     <ul>
       <li>1月</li>
       <li>2月</li>
       <li>3月</li>
       <li>4月</li>
     </ul>
  </li>
</ul>
<script type="text/javascript">
jQuery.fn.accordion = function(options){
  var main = $(this);
  var itemSelector = options.item || '> li'; // mainからのselector
  var childSelector = options.child || '> ul'; // itemからのselector
  var triggerSelector = options.trigger || '> span'; // itemからのselector
  var showAnimation = options.show || function(e){
    e.slideDown(500);
  }
  var hideAnimation = options.hide || function(e){
    e.slideUp(500);
  }
  main.find(itemSelector).each(function(){
    var item = $(this);
    item.find(triggerSelector).click(function(){
      var child = item.find(childSelector);
      if (child.is(':visible')){
        hideAnimation(child);
      }else{
        hideAnimation(main.find(itemSelector + ' ' + childSelector + ':visilbe'));
        showAnimation(child);
      }
    })
  });
  main.find(itemSelector + ' ' + childSelector).hide();
  return this;
}
$('#accordion_example').accordion();
</script>