title: Tree using ul li and javascript without plugin
body: <p>I try to make a simple tree using javascript without plugin in <a href="http://jsfiddle.net/7Undy/" rel="nofollow">here</a>
  <br>Here is my html</p>
  
  <pre><code>&lt;ul class="tree"&gt;
      &lt;li&gt;First Child
          &lt;ul&gt;
              &lt;li&gt;First Child
                  &lt;ul&gt;
                      &lt;li&gt;First Child&lt;/li&gt;
                      &lt;li&gt;Second Child&lt;/li&gt;
                      &lt;li&gt;Third Child&lt;/li&gt;
                      &lt;li&gt;Fourth Child&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;Second Child&lt;/li&gt;
              &lt;li&gt;Third Child&lt;/li&gt;
              &lt;li&gt;Fourth Child&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Second Child&lt;/li&gt;
      &lt;li&gt;Third Child&lt;/li&gt;
      &lt;li&gt;Fourth Child&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and my js</p>
  
  <pre><code>$( "li" ).on( "click", function() {
      if ($(this).children('ul').css('display') == 'none') {
          $(this).children('ul').css("display", "");
      } else {
          //alert( $( this ).text() );
          $(this).children('ul').css("display", "none");
      }
  });
  </code></pre>
  
  <p>but it only working with first level. How to do that thanks.</p>