 <p>Try this ;)</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() { $('.bg-primary').on('click', function() { $('.' + $(this).attr('id')).slideToggle(); }).css('cursor', 'pointer'); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.hide { display: none; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;table border="1"&gt; &lt;thead&gt; &lt;tr class="btn-info"&gt; &lt;th&gt;header&lt;/th&gt; &lt;th&gt;header&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tr id="main1" class="bg-primary"&gt; &lt;td&gt;maintext1&lt;/td&gt; &lt;td&gt;maintext1&lt;/td&gt; &lt;/tr&gt; &lt;tr class="bg-info main1 hide"&gt; &lt;td&gt;subtext1&lt;/td&gt; &lt;td&gt;subtext1&lt;/td&gt; &lt;/tr&gt; &lt;tr class="bg-info main1 hide"&gt; &lt;td&gt;subtext1&lt;/td&gt; &lt;td&gt;subtext1&lt;/td&gt; &lt;/tr&gt; &lt;tr id="main2" class="bg-primary"&gt; &lt;td&gt;maintext2&lt;/td&gt; &lt;td&gt;maintext2&lt;/td&gt; &lt;/tr&gt; &lt;tr name="toggletext2" class="bg-info main2 hide"&gt; &lt;td&gt;subtext2&lt;/td&gt; &lt;td&gt;subtext2&lt;/td&gt; &lt;/tr&gt; &lt;tr name="" class="bg-info main2 hide"&gt; &lt;td&gt;subtext2&lt;/td&gt; &lt;td&gt;subtext2&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</code></pre> </div> </div> </p>