Selecting all children and decendants with jQuery
<p>I have some HTML that is being produced by a WordPress plugin that is designed to allow for expandable/collapsible text, with up to three levels of depth. I would like it so that if you were to collapse the first or second levels and the children below it were also expanded those too would get collapsed but nothing I use seems to allow the selection of <em>all</em> children. This is what I'm using so far:</p>

<pre><code>$(".hidden-text-toggle").click(function () {
    if ($(".hidden-text:animated").length) return false;
        $(this).next().slideToggle();
        if ($(this).hasClass('expanded') ){     
            $(this).removeClass('expanded');
            $(this).animate({ backgroundColor: "black" , color: "red"});    
        }
        else
        {
            $(this).addClass('expanded');
            $(this).animate({backgroundColor: "red" , color: "black"});

        }
        return false;
    });

&lt;div class="wrapper"&gt;
    &lt;h2 class="title"&gt;Level One&lt;/h2&gt;
    &lt;div class="text" href="#"&gt;
        This is level one text.
        &lt;div class="wrapper"&gt;
            &lt;h2 class="title" href="#"&gt;Level Two&lt;/h2&gt;
            &lt;div class="text"&gt;
                This is level two text.
                &lt;div class="wrapper"&gt;
                    &lt;h2 class="title" href="#"&gt;Level Three&lt;/h2&gt;
                    &lt;div class="text"&gt;                          
                        This is level three text. 
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I would have thought that putting something like <code>$(this).find(".text").slideUp();</code> after line 4 would allow this but apparently I am wrong. </p>

<p>Any help would be much appreciated!</p>
