morimotoです。

前回の「jQueryでシンプルにExpanderを作る」の続編です。

前回作成したものを使ってみて思ったこと、「うーん、いまいち！」

ということで改良してみました。

(function($){
  var options = {
    initCollapse: true,
    bindEvent: 'click',
    collapsedClass: 'collapsed'
  };

  $.fn.simpleExpander = function(target, opts){
    if (opts) { $.extend(options, opts); }
    $(this).addClass('simpleExpander');
    if (options.initCollapse)
        $(this).addClass(options.collapsedClass);
    return initializeExpander(this, target, options);
  };
  function initializeExpander(trigger, target, options) {
    toggleTarget(trigger, target, options.collapsedClass);
    $(trigger).bind(options.bindEvent, function(){
      $(this).toggleClass(options.collapsedClass);
      toggleTarget(trigger, target, options.collapsedClass);
    });
    return $(trigger);
  }
  function toggleTarget(trigger, target, collapsedClass) {
    if(target) 
      $(trigger).hasClass(collapsedClass) ? 
          $(target).hide() : $(target).show();
  }

})(jQuery);

使い方

expand/collapseする対象をjQueryオブジェクトで指定する

Demo

Code

<p id="expander-test-1"  
style="border:1px solid #666;background-color: #FEE">test 1</p>
<div id="test-1">
  <span>朝食にバナナ<b>ボート</b>を食べました。<b>冗談です。</b></span>
</div>
<script type="text/javascript"><!--
$('#expander-test-1').simpleExpander($('#test-1').find('b'));
// --></script>

Optionを入れてみる

Demo

Code

<p id="expander-test-2" 
style="border:1px solid #666;background-color: #FEE">マウスを乗せると...</p>
<div id="test-2">
  <span><b>Expand対象</b>と<b>Expand対象外</b>もselector次第です。</span>
</div>
<script type="text/javascript"><!--
$('#expander-test-2').simpleExpander($('#test-2').find('span b:first'), 
{initCollapse: false, bindEvent: 'mouseover'});
// --></script>

以上、morimotoでした。。。