How to use slideToggle on a set of elements?
<p>I'm attempting to use the jQuery slideToggle() function to minimize a set of table rows. The problem I'm encountering is that while the set of rows are minimized, the animation does not seem to be taking effect. I think it has something to do with the manner in which I'm using slideToggle, calling it on  a set of results instead of on a parent element, but am not sure.</p>

<p>I'm using this bit of javascript and jquery to minimize a set of rows.</p>

<pre><code>$('td').on("click", "a.collection-minimize, a.list-minimize", function(event) {                                          
   event.stopPropagation(); 
   // Get the class of the following row
   var minimize_class = $(this).parent().parent().next().attr('class');                                                 
   // trim whitespace
   minimize_class = minimize_class.replace(/^\s\s*/, '').replace(/\s\s*$/, '');                                         
   // Minimize all following rows of the same class.
   $(this).parent().parent().siblings('.' + minimize_class).slideToggle();                                                 
});
</code></pre>

<p>An example set of rows:</p>

<pre><code>&lt;tr class="collection-original"&gt;
    &lt;td&gt;
        &lt;a class="collection-minimize" onclick="return false" href="#"&gt;Minimize collection&lt;/a&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=" collection-original" style="display: table-row;"&gt;&lt;/tr&gt;                 
&lt;tr class=" collection-original" style="display: table-row;"&gt;&lt;/tr&gt;
&lt;tr class=" collection-original" style="display: table-row;"&gt;&lt;/tr&gt;
&lt;tr class=" collection-original" style="display: table-row;"&gt;&lt;/tr&gt;
</code></pre>

<p>A live page where this is being used can be viewed here: <a href="http://iodocs.vky.me/whitehat#Application-API-PUT-Modify-an-application" rel="nofollow">http://iodocs.vky.me/whitehat#Application-API-PUT-Modify-an-application</a>. </p>
