Collapsing the column of the table
<p>I do have a table of 5 columns.i want to collapse last three columns of the table on click of a image and again reappear on click of other image.I have written some code but its not working so please guide me on this:</p>

<pre><code>&lt;img id="hide" src="assets/img/decrease_indent.png" /&gt;
        &lt;img id="show" src="assets/img/increase_indent.png" /&gt;

&lt;thead&gt;
                &lt;tr&gt;
                    &lt;th class=""&gt;Name&lt;/th&gt;
                    &lt;th class=""&gt;&lt;/th&gt;
                    &lt;th class=""&gt;Dur&lt;/th&gt;
                    &lt;th class=""&gt;Start&lt;/th&gt;
                    &lt;th class=""&gt;&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody data-bind="foreach:items"&gt;
                &lt;tr  data-bind="value:id"&gt;
                    &lt;td data-bind="text:"&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;/td&gt;
                    &lt;td  data-bind="text:"&gt;&lt;/td&gt;
                    &lt;td data-bind="text:"&gt;&lt;/td&gt;
                    &lt;td data-bind="text:"&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;



    &lt;script type="text/javascript"&gt;
$(function(){
        $("#hide").live('click',function(){
        $("th:eq(2),th:eq(3),th:eq(4)td:eq(2),td:eq(3),td:eq(4)").hide();
        });
        $("#show").live('click',function(){
        $("th:eq(2),th:eq(3),th:eq(4)td:eq(2),td:eq(3),td:eq(4)").show();
        });
});
        &lt;/script&gt;
</code></pre>
