title: Show first level children of a nested ul li using jquery
body: <p>I have an HTML file like this:</p>
  
  <p>JS:</p>
  
  <pre><code> function functionName(event) {
    event.stopPropagation();
    var item = event.data.param;
    document.getElementById("list").innerHTML = item;
   }
  
   $(document).ready(function() {
     $("li").each(function() {
      $(this).on('click', {param: this.id}, functionName);
   });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="main"&gt;
  &lt;div id="tree"&gt;
  &lt;ul class="xyz"&gt;
    &lt;li class="hide"&gt;AVC&lt;/li&gt;
    &lt;li class="hide"&gt;Anna&lt;/li&gt;
    &lt;li class="hide"&gt;Peter&lt;/li&gt;
    &lt;li id="foo1"&gt;Gary
    &lt;ul class="xyz"&gt;
      &lt;li class="hide"&gt;John&lt;/li&gt;
      &lt;li class="hide"&gt;Anna&lt;/li&gt;
      &lt;li id="foo2"&gt;Briton
      &lt;ul class="xyz"&gt;
         &lt;li class="hide"&gt;gg&lt;/li&gt;
         &lt;li class="hide"&gt;hh&lt;/li&gt;
         &lt;li id="foo3"&gt;Layla
         &lt;ul class="xyz"&gt;
            &lt;li class="hide"&gt;gg&lt;/li&gt;
            &lt;li class="hide"&gt;hh&lt;/li&gt;
            &lt;li id="foo4"&gt;Undertaker
            &lt;ul class="xyz"&gt;
              &lt;li class="hide"&gt;gg&lt;/li&gt;
              &lt;li class="hide"&gt;hh&lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;
         &lt;/ul&gt;
         &lt;/li&gt;
       &lt;/ul&gt;
       &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
  
     &lt;div id="list"&gt;&lt;/div&gt;
  
     &lt;/div&gt;
  </code></pre>
  
  <p>I have two div tags whose id is receptively <code>tree</code> and <code>list</code>. Tree div contains the nested <code>ul li</code> tags and each <code>li</code> have unique id.</p>
  
  <p>I want to show the first level children of a <code>ul li</code> tag. For example, when I am clicking on <code>Gary</code>, it should show the first level children  ( <code>John, Anna, Britton</code>) in right <code>div i.e. list</code>.</p>
  
  <p>Right now I am able to get the id of <code>ul li</code> element in <code>list</code> div when clicking any item.</p>
  
  <p>How can I traverse the first level children of clicking element using jquery/javascript and display them in <code>list</code> div?</p>
  
  <p>Thanks</p>