Expanding a table using checkbox
<pre><code>&lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'&gt;&lt;/script&gt;
&lt;script type='text/javascript'&gt;
    $(window).load(function () {
        $('.varx').click(function () {
            $(".text").toggle(this.checked);
            $(".text1").toggle(this.checked);
            $(".text2").toggle(this.checked);
            $(".text3").toggle(this.checked);
        });
    });
&lt;/script&gt;
&lt;table border='1'&gt;
    &lt;?php for ($i=1; $i&lt;=5; $i++){ ?&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type='checkbox' class='varx' /&gt;
            &lt;/td&gt;
            &lt;td&gt;aaa&lt;/td&gt;
            &lt;td&gt;bbb&lt;/td&gt;
            &lt;td&gt;ccc&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;ddd&lt;/td&gt;
            &lt;td&gt;eee&lt;/td&gt;
            &lt;td&gt;fff&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class='text3' colspan='4' style='display:none'&gt;&lt;/td&gt;
            &lt;td class='text3' style='display:none'&gt;aaa&lt;/td&gt;
            &lt;td class='text2' style='display:none'&gt;bbb&lt;/td&gt;
            &lt;td class='text1' style='display:none'&gt;ccc&lt;/td&gt;
            &lt;td class='text' style='display:none'&gt;ddd&lt;/td&gt;
            &lt;td class='text3' colspan='3' style='display:none'&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;?php } ?&gt;
&lt;/table&gt;
</code></pre>

<p>This is running code, actually it is not a <code>for ($i=1; $i&lt;=5; $i++)</code> it is <code>foreach($items as $i)</code>. I decided to make it a <code>for</code> loop so that you can test it w/o database. My problem is, when I check one checkbox, all of the rows will expand and that is not right. What I need is when I check one checkbox, only one row only will expand. </p>

<p>Thanks for all of your help.</p>
