Question

I want to toggle the ul when I click on group1 or group2

HTML

<li class="sort">
  <span></span>
  <a class='expand'>Group1</a>
  <a style='padding-right:10px; float:right' href='#'>Delete</a>
  <a style='padding-right:10px; float:right' href='#'>Edit</a>
  <ul id="0" style='display:none'>
    <li style='border:none' id="1" class='sort'>
        <span></span>
        <a href='#'>Patent 1</a>
        <em style='padding-left: 60px;'>The description of patent 1</em>
        <a style='padding-right:10px; float:right' href='#'>Delete</a>
        <a style='padding-right:10px; float:right' href='#'>Edit</a>
    </li>
    <li style='border:none' id="2" class='sort'>
        <span></span>
        <a href='#'>Patent 2</a>
        <em style='padding-left: 60px;'>The description of patent 2</em>
        <a style='padding-right:10px; float:right' href='#'>Delete</a>
        <a style='padding-right:10px; float:right' href='#'>Edit</a>
    </li>
  </ul>
</li>

I tried

 <script>
  $(document).ready(function(){
    $('.expand').click(function() {
        $(this).next('ul').slideToggle('slow');
    });
});
</script>

Thanks

Answer 1

You can use nextAll and then reduce the matched set to the first element with eq:

$('.expand').click(function() {
    $(this).nextAll('ul').eq(0).slideToggle('slow');
});

The next method will return the immediately following sibling, if it matches the selector. In your case, that’s the “Delete” link, which does not match.

If there is always only going to be one ul element as a child of the li, you can just use siblings:

$('.expand').click(function() {
    $(this).siblings('ul').slideToggle('slow');
});