jQuery, on click, toggle field like it is toggling class
<p>I have this:</p>

<pre><code>&lt;table id="myTable" style="width: 650px;"&gt;
    &lt;thead&gt;
    &lt;tr style="font-weight: bold;"&gt;
        &lt;td&gt;Name&lt;/td&gt;
        &lt;td&gt;Price&lt;/td&gt;
        &lt;td&gt;Supplier&lt;/td&gt;
        &lt;td&gt;Amount&lt;/td&gt;
        &lt;td&gt;Add&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
  &lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Fish&lt;/td&gt;
&lt;td&gt;299&lt;/td&gt;
&lt;td&gt;BlueHouse&lt;/td&gt;
&lt;td&gt;
&lt;form action="method"&gt;
&lt;input type="hidden" name="product_id" value="1" /&gt;
&lt;input class="hideme" type="text" name="amount" value"" /&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;input class="hidden" type="button" name="Add" /&gt;
&lt;/form&gt;
&lt;/td&gt;
&lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>With the JS:</p>

<pre><code>$(document).ready(function(){
    $('#myTable &gt; tbody tr').live('click', function(){
        $(this).toggleClass('highlight');
    });
</code></pre>

<p>CSS:</p>

<pre><code>.highlight{
background: #CCC;
}
.hideme{
display: none;
}
</code></pre>

<p>Which works like when you click on one of the 's thats inside , then it will highlight it by toggling the CSS class "highlight". </p>

<p>Now what I would like to do also is showing the input fields that has the class "hideme".
First I thought to do $('.hideme').show(), but since there's more 's than one, this wouldnt work. And i would like it to show the input fields for the current toggled . </p>

<p>So when you click again on the tr to toggle 'off' (so it doesnt have the highlight class), i would like to have the input fields to hide again.</p>

<p>Hope you understood, otherwise just comment.</p>

<p>How can i do this?</p>
