jquery plugin collapsable

by bighostkim

HTML

<ul id="tree">
    <li>Root
        <ul>
            <li>Foo
              <ul>
                <li>Bar
                    <ul>
                        <li>FooBar
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                            </ul>
                        </li>
                    </ul>
                 </li>
              </ul>
          </li>
       </ul>
    </li>
</ul>

<script>
$( function() {
  $("#tree").collapsable();
});
</script>

<div id="div-tree">
    <div>
        Foo
        <div>
            Bar
            <div>
                FooBar
            </div>               
        </div>
        <div>
            Fooz
            <div>
                Baz
            </div>   
        </div>
    </div>
</div>
<script>
$( function() {
  $("#div-tree").collapsable({
    parentTag : "div",
    childTag: "div"            
  });
});
</script>

CSS

li  {border: 1px solid black; margin: 10px; list-style:none}
div {border:1px solid black; margin:10px}

JavaScript

(function( $ ) {
  var methods = {
    foo : function(options) { }
  };
  $.fn.collapsable = function( options ) {
    var config = $.extend( {
      markerTag : "span",
      markerClass: "collapsable-marker",
      markerStyle : { border: '1px solid #ccc' },
      markerHtmlExpanded : "+",
      markerHtmlCollapsed : "-",
      parentTag : "li",
      childTag : "ul"
    }, options);

    this.find(config.parentTag+":has("+config.childTag+")").each( function(e) {
      if ($(this).find("."+config.markerClass).length == 0) {
          var marker = $("<"+config.markerTag+">")
              .addClass(config.markerClass)
              .css(config.markerStyle)
              .html(config.markerHtmlExpanded);
          $(this).prepend(marker);
      }
    });
    this.find(".collapsable-marker").live('click', function(e) {
      var childTag = $(this).closest(config.parentTag).find("> "+config.childTag);
      childTag.is(":visible") ? childTag.hide() : childTag.show();
      $(this).html( childTag.is(":visible") ? 
         config.markerHtmlExpanded : config.markerHtmlCollapsed );
    });

    return this;
  };
})( jQuery );