Select from sub list only with children() jqurey
<p>The HTML:</p>

<pre><code>&lt;ul class="main_list"&gt;
    &lt;li class="list_folder"&gt;One&lt;/li&gt;
    &lt;li class="list_folder"&gt;Two&lt;/li&gt;
    &lt;li class="list_folder"&gt;New list &lt;ul class="hide_list"&gt;
            &lt;li class="list_folder"&gt;New one&lt;/li&gt;
            &lt;li class="list_folder"&gt;New Two&lt;/li&gt;
            &lt;li class="list_folder"&gt;Third list&lt;ul class="hide_list"&gt;
                    &lt;li class="list_folder"&gt;Third one&lt;/li&gt;
                    &lt;li class="list_folder"&gt;Third two&lt;/li&gt;
                &lt;/ul&gt;&lt;/li&gt;
        &lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What i want to do: All sub lists with class of "hide_list" are hidden with CSS. When i click on li that contains the hidden list, i would like that hidden list to toggle open/close.
My jquery code:</p>

<pre><code>$('.list_folder').on('click',function(){
    $(this).children('.hide_list').slideToggle();
}
</code></pre>

<p>The issue: it works on first sub list, but when i click on next sublist deeper it will select the next deeper list and also the outer lists, and in result the whole list will collapse.
What am i doing wrong? Any suggestions?
Thank you in advance.</p>
