Question

Sorry for the vague title, but I couldn’t find an appropriate title, explaining the problem well.

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.

JQuery code.

$(document).ready(function()
{
$('ul.subcat').hide();

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

});
});

HTML code

<ul class="headcat">
  <li>item 1
  <ul class="subcat">
    <li>subitem 1
    <ul class="subcat">
      <li>subsubitem 1
      <ul class="subcat">
        <li><p>text</p></li>
      </ul>
      </li>
      <li>subsubitem 2
      <ul class="subcat">
        <li><p>text</p></li>
        <li>subsubsubitem 1
        <ul class="subcat">
          <li><p>text</p></li>
        </ul>
        </li>
        <li>subsubsubitem 2</li>
      </ul>
      </li>
    </ul>
    </li>
    <li>item 2</li>
  </ul>
  </li>
</ul>  

Answer 1

You need to only select direct descendants of the currently clicked li, try this:

$(this).children("ul").toggle();

The following will also work, however it’s not considered best practice to use the > descendant selector without a primary element before it.

$('> ul', this).toggle(); 

Example fiddle