Question

I have this html structure:

<ul class="shopp_categories">
<li><a href="#">TEXT</a>
    <ul class="children">
        <li><a href="#">TEXT</a></li>
    </ul>
</li>
<li><a href="#">Text</a></li>
<li><a href="#">TEXT</a>
    <ul class="children">
        <li><a href="#">TEXT</a></li>
    </ul>
</li>    
</ul> 

This is my js code:

jQuery('#sidebar .shopp_categories ul.children').parent().prepend('<span class="sidebar_cats_more"></span>');
jQuery('.sidebar_cats_more').click(function(){
  var $children_list = jQuery(this).find('ul').children().children();
  alert($children_list.html());
  $children_list.slideToggle(1000, function () {
        if ( $children_list.is(':visible') ) {

        }
        if ( $children_list.is(':hidden') ) {

        }
        });
  });

I need to find the children list from the List Item where

span.sidebar_cats_more

Was prepend to. If I found this list, it shall be animated with slideToggle.
The problem is located in this line:

var $children_list = jQuery(this).find('ul').children().children();

Answer 1

The <ul> element isn’t a child of the .sidebar_cats_more; it’s a child of the element after it. (which you prepended it to).

Write $(this).parent().find('ul') or $(this).next().find('ul').