How to get ul inside an li

<li class="cate-item"> 
<button class="cate-label" >item 1 </button>
    <ul class="sub-categ">
    <li> sub item 1</li>
    <li> sub item 2</li>
    <li> sub item 3</li>
    <li> sub item 4</li>
    </ul>
</li>

<li class="cate-item"> 
<button class="cate-label" >item 2 </button>
<ul class="sub-categ">
    <li> sub item 1</li>
    <li> sub item 2</li>
    <li> sub item 3</li>
    <li> sub item 4</li>
    </ul>
</li>

This li item is generated dynamically I want to toggle li on the cate-label button click. for that, I did the following code

  $(document).on("click", "#categoryList > li .cate-label", function () {
      var currentItem = $(this).closest("li");
      ItemToHide = $("#categoryList > li").not(currentItem);
        ItemToHide.removeClass("active-item");
    ItemToHide.find(".sub-cate").hide();
      currentItem.toggleClass("active-item");
     
     
     }
     
     );

when I try to hide item using ItemToHide.find(“.sub-cate”).hide(); it didn’t hide anything . I tried to find the length of the item using ItemToHide.find(“.sub-cate”).length but it returned 0.