title: Expanding and collapsing table row (tr) using jquery
body: <p><img src="https://i.stack.imgur.com/1K6xb.png" alt="enter image description here"></p>
  
  <p>I have a table with active and inactive items. This table is dynamically populated from database. I am trying to add a toggle for only inactive items in my table and display all active items. I mean I want to show all active items and slide toggle only inactive items in my table.</p>
  
  <pre><code>&lt;div class="alertsList"&gt;
      &lt;table width="100%"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;Id&lt;/th&gt;
                  &lt;th&gt;From&lt;/th&gt;
                  &lt;th&gt;Action&lt;/th&gt;
                  &lt;th&gt;State&lt;/th&gt;
                  &lt;th&gt;time&lt;/th&gt;
                  &lt;tr class="alertRow"&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;1025973&lt;/td&gt;
                      &lt;td&gt;SYSTEM&lt;/td&gt;
                      &lt;td&gt;false&lt;/td&gt;
                      &lt;td class="Active"&gt;Active&lt;/td&gt;
                      &lt;td&gt;2014-09-23T00:59:26.92&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="alertRow"&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;1025974&lt;/td&gt;
                      &lt;td&gt;SYSTEM&lt;/td&gt;
                      &lt;td&gt;false&lt;/td&gt;
                      &lt;td class="Active"&gt;Active&lt;/td&gt;
                      &lt;td&gt;2014-09-23T00:59:26.92&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="alertRow"&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;1025974&lt;/td&gt;
                      &lt;td&gt;SYSTEM&lt;/td&gt;
                      &lt;td&gt;false&lt;/td&gt;
                      &lt;td class="InActive"&gt;InActive&lt;/td&gt;
                      &lt;td&gt;2014-09-23T00:59:26.92&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="alertRow"&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;1025974&lt;/td&gt;
                      &lt;td&gt;SYSTEM&lt;/td&gt;
                      &lt;td&gt;false&lt;/td&gt;
                      &lt;td class="InActive"&gt;InActive&lt;/td&gt;
                      &lt;td&gt;2014-09-23T00:59:26.92&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="alertRow"&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;1025974&lt;/td&gt;
                      &lt;td&gt;SYSTEM&lt;/td&gt;
                      &lt;td&gt;false&lt;/td&gt;
                      &lt;td class="Active"&gt;Active&lt;/td&gt;
                      &lt;td&gt;2014-09-23T00:59:26.92&lt;/td&gt;
                  &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  $('.alertRow.InActive').Parent.click(function () {
  
      $(this).nextUntil('tr.td.InActive').slideToggle(1000);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/chandrashekarthota/3pakpw88/" rel="nofollow noreferrer">My Fiddle code</a></p>
  
  <p>How can I do that..?</p>