title: Expanding-Collapsable HTML List- ul - li - Javascript
body: <p>I am implementing a ul and li list, from json data and with expand/collapse function.</p>
  
  <p>The problem is that when trying the expand/collapse, all the subitems are expanding together, but i want only the clicked one to be collapsed/expanded;</p>
  
  <p>Here is my code :</p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
        &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
        &lt;style type="text/css"&gt;
           ul li ul {
           display: none;
           } 
           a {
           color: red;
           }
        &lt;/style&gt;
        &lt;title&gt;&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;ul id="menu" class="list"&gt;
        &lt;/ul&gt;
        &lt;script type="text/javascript"&gt;
           $(window)
                   .load(
                           function() {
                               var JSON = {
                                   menu : [ {
                                       name : 'Title',
                                       link : '#',
                                       sub : [ {
                                           name : 'Enclosure1',
                                           link : '#',
                                           sub : null
                                       }, {
                                           name : 'Enclosure2',
                                           link : '#',
                                           sub : null
                                       }, {
                                           name : 'Enclosure3',
                                           link : '#',
                                           sub : null
                                       } ]
                                   },{
                                       name : 'Link',
                                       link : '#',
                                       sub : null
                                   },{
                                       name : 'Content',
                                       link : '#',
                                       sub : null
                                   },{
                                       name : 'Enclosures',
                                       link : '#',
                                       sub : [ {
                                           name : 'Enclosure1',
                                           link : '#',
                                           sub : null
                                       }, {
                                           name : 'Enclosure2',
                                           link : '#',
                                           sub : null
                                       }, {
                                           name : 'Enclosure3',
                                           link : '#',
                                           sub : null
                                       } ]
                                   }, {
                                       name : 'Authors',
                                       link : '#',
                                       sub : [ {
                                           name : 'Author1',
                                           link : '#',
                                           sub : null
                                       }, {
                                           name : 'Author2',
                                           link : '#',
                                           sub : null
                                       } ]
                                   },{
                                       name : 'Published At',
                                       link : '#',
                                       sub : null
                                   }, {
                                       name : 'Stream',
                                       link : '#',
                                       sub : [ {
                                           name : 'STR1',
                                           link : '#',
                                           sub : null
                                       }, {
                                           name : 'STR2',
                                           link : '#',
                                           sub : null
                                       } ]
                                   } ]
                               }
  
                               $(function() {
  
                                   function parseMenu(ul, menu) {
                                       for (var i = 0; i &lt; menu.length; i++) {
                                           var li = $(ul).append(
                                                   '&lt;li&gt;'+ menu[i].name
                                                           + '&lt;/li&gt;');
                                           if (menu[i].sub != null) {
                                               var subul = $('&lt;ul class="list"&gt;&lt;/ul&gt;');
                                               $(li).append(subul);
                                               parseMenu($(subul), menu[i].sub);
                                                   }
                                       }
                                   }
  
                                   var menu = $('#menu');
                                   parseMenu(menu, JSON.menu);
                               });
                           });//]]&gt;​
        &lt;/script&gt;
        &lt;script type="text/javascript"&gt;$(document).on('click', '.list &gt; li ', function () {
           $(this).parent().children('ul').toggle();
           })
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>