title: How can i hide next set of elements using jquery
body: <p>I need to hide the <code>&lt;tr&gt;</code> elements which are not having class in between the <code>&lt;tr&gt;</code> which has class 'class1'</p>
  
  <pre><code>   &lt;tr class="class1"&gt;&lt;td&gt;&lt;input type="button" value="Click" /&gt;&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;6&lt;/td&gt;&lt;/tr&gt;
     &lt;tr class="class1"&gt;&lt;td&gt;&lt;input type="button" value="Click" /&gt;&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;7&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;9&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;10&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;12&lt;/td&gt;&lt;/tr&gt;
     &lt;tr class="class1"&gt;&lt;td&gt;&lt;input type="button" value="Click" /&gt;&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;7&lt;/td&gt;&lt;/tr&gt;
     ...etc
  </code></pre>
  
  <p>When I click the <code>&lt;tr class="class1"&gt;</code>, the code should hide only <code>&lt;tr&gt;</code> which are between the clicked row - and the next one with class 'class1'.</p>