Toggling list, clicking on item shows all subitems instead of only subitems from item
<p>Sorry for the vague title, but I couldn't find an appropriate title, explaining the problem well.</p>

<p>The problem: I wrote a code that toggles lists. It works the way I want it. When I click on the the 'headcategory' it opens the subcategories, etc. The problem occurs when I click on the headcategory for the first time, it opens every list, which is not what I want. When I close and open it again, it works the way it should be. I'm trying to figure out why it does that, but I've no clue. So if someone could help me, he/she would be greatly appreciated.</p>

<p>JQuery code.</p>

<pre><code>$(document).ready(function()
{
$('ul.subcat').hide();

$('li').click(function(event)
{ 
    event.stopPropagation();
    $('ul', this).toggle(); 

});
});
</code></pre>

<p>HTML code</p>

<pre><code>&lt;ul class="headcat"&gt;
  &lt;li&gt;item 1
  &lt;ul class="subcat"&gt;
    &lt;li&gt;subitem 1
    &lt;ul class="subcat"&gt;
      &lt;li&gt;subsubitem 1
      &lt;ul class="subcat"&gt;
        &lt;li&gt;&lt;p&gt;text&lt;/p&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;subsubitem 2
      &lt;ul class="subcat"&gt;
        &lt;li&gt;&lt;p&gt;text&lt;/p&gt;&lt;/li&gt;
        &lt;li&gt;subsubsubitem 1
        &lt;ul class="subcat"&gt;
          &lt;li&gt;&lt;p&gt;text&lt;/p&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;subsubsubitem 2&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;item 2&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;  
</code></pre>
