morimotoです。

「もっと画面をすっきりとしたいな・・・」と思う時に良く使われるのが、閉じたり開いたりするExpand機能かと思います。 そのExpandをするために毎回javascriptを書くのは面倒くさい。

そこで簡単にExpandさせれるようにjQueryでPluginを書いてみました。 （完成しているとはいえませんが。。。）

(function($){
  $.fn.simpleExpander = function(options){
    var target = options.target || undefined;
    var trigger = options.trigger || 'click';
    var collapsedClass = options.collapsedClass || 'collapsed';
    if (typeof(options) == 'string') target = options;
    if (target) {
      $(this).addClass('expander');
      targetToggle(this, target, collapsedClass);
      $(this).bind(trigger, function(){
        $(this).toggleClass(collapsedClass);
        targetToggle(this, target, collapsedClass);
      });
    }
    return this;
  };

  function targetToggle(el, target, collapsedClass) {
    if ($(el).hasClass(collapsedClass)) { 
      $(target).hide(); 
    } else { 
      $(target).show(); 
    }
  }
})(jQuery);

使い方

<button id="trigger1">button 1</button>
<button id="trigger2">button 2</button>

<div class="target apple">window 1</div>
<div class="target banana">window 2</div>
<div class="target grape">window 3</div>

<script type="text/javascript">
$('#trigger1').simpleExpander('div.target');
$('#trigger2').simpleExpander('div.target.banana');
$('div.apple').simpleExpander({target: 'div.target.grape', trigger: 'mouseover'});
</script>

demo

ボタン１はdiv全てがtoggleします。 ボタン２は真ん中のdivのみtoggleします。 一番上のdivをマウスオーバーすると一番下のdivがtoggleします。

もっとシンプルに作れるのかもしれないですが、こんなのもあるんだなという程度で見ていただくとありがたいです。

以上、morimotoでした。。。