Show / Hide tr after image with jquery
<p>I have a table like this:</p>

<pre><code>&lt;table id="tbl"&gt;
     &lt;tr&gt;&lt;th&gt;My Table&lt;/th&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;The second row&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>I want to show / hide the <code>tr</code> after arrow. I have written this script:</p>

<pre><code>$(document).ready(function () {
    $("#tbl tr:odd").addClass("odd");
    $("#tbl tr:even").addClass("even");
    $("#tbl tr:not(.odd)").hide();
    $("#tbl tr:first-child").show();
    $('.arrow').click(function () {
        $(this).next("tr").toggle();
        $(this).toggleClass("up");
    });
});
</code></pre>

<p>but this cant show or hide tr. How can I solve this.
Thanks</p>
