jQuery Toggle Help
<p>I have the following code:</p>

<pre><code>$(document).ready(function() {


  // Manage sidebar category display
  jQuery("#categories &gt; ul &gt; li.cat-item").each(function(){
    var item;
    if ( jQuery(this).has("ul").length ) {   
      item = jQuery("&lt;span class='plus'&gt;+&lt;/span&gt;").click(function(e){
        jQuery(this)
          .text( jQuery(this).text() === "+" ? "-" : "+" )
          .parent().next().toggle();
        return false;
      });

      jQuery(this).find(".children").hide();
    } else {
      item = jQuery("&lt;span class='plus'&gt;&amp;nbsp;&lt;/span&gt;");
    }

    jQuery(this).children("a").prepend( item );
  });

});
</code></pre>

<p>This creates a sort of toggle system for my categories. But it will only work with 2 levels deep, what I need it to do is work with unlimited levels.</p>

<p>The HTML:</p>

<pre><code>&lt;li id="categories"&gt;
    &lt;ul&gt;
        &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
            &lt;ul&gt;
                &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
            &lt;ul&gt;
                &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="cat-item"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
</code></pre>
