Collapsing the column of the table

Question

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:

<img id="hide" src="assets/img/decrease_indent.png" />
        <img id="show" src="assets/img/increase_indent.png" />

<thead>
                <tr>
                    <th class="">Name</th>
                    <th class=""></th>
                    <th class="">Dur</th>
                    <th class="">Start</th>
                    <th class=""></th>
                </tr>
            </thead>
            <tbody data-bind="foreach:items">
                <tr  data-bind="value:id">
                    <td data-bind="text:"></td>
                    <td></td>
                    <td  data-bind="text:"></td>
                    <td data-bind="text:"></td>
                    <td data-bind="text:"></td>
                </tr>
            </tbody>



    <script type="text/javascript">
$(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();
        });
});
        </script>

Your jQuery code should be wrapped inside `$(document).ready(function() { // put all your jQuery goodness in here. });` — Muleskinner, Feb 04 '13 at 11:13
possible duplicate of [Collapse/Expand table columns (not rows)](http://stackoverflow.com/questions/1511677/collapse-expand-table-columns-not-rows) — cryptic ツ, Feb 04 '13 at 11:14
your table content should be wrapped inside ` your table content goes here
` — Muleskinner, Feb 04 '13 at 11:57
yes that much i know if u do have a answer then reply @Muleskinner — Santosh Mishra, Feb 04 '13 at 12:25
Note that `.live` is no longer supported in the latest versions of jQuery. Hard to tell if that is the problem as you do not mention which version you use. Could you post your code (including your valid html) to jsfiddle? — Muleskinner, Feb 04 '13 at 12:38

Adil · Accepted Answer · 2013-02-04T13:02:12.393

1

Try this,

Live Demo

//To hide
$('th:gt(2)').hide();
$('td:gt(2)').hide();

//To show
$('th:gt(2)').show();
$('td:gt(2)').show();

Edit based on comments

Live Demo

edited Feb 04 '13 at 13:02

answered Feb 04 '13 at 11:49

Adil

143,427
25
201
198

but due to this code my 1st row is getting collapsed.i want to do this with last three rows – Santosh Mishra Feb 04 '13 at 12:28
Do you want to collapse columns or rows? check the statement in question "i want to collapse last three columns of the table" – Adil Feb 04 '13 at 12:30
What does this mean in your previous comment "but due to this code my 1st row is getting collapsed.i want to do this with last three rows" – Adil Feb 04 '13 at 12:34
that means my all 5 table headings are getting collapsed that means entire 1st row – Santosh Mishra Feb 04 '13 at 12:36
In dome all the columns are not collapsing ? – Adil Feb 04 '13 at 12:39
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23900/discussion-between-santosh-mishra-and-adil) – Santosh Mishra Feb 04 '13 at 12:39

score 0 · Answer 2 · answered Feb 04 '13 at 21:50

0

You miss a comma between th:eq(4) and td:eq(2) in both hide and show.

A working example based on your code can be seen here at jsFiddle.

Note that as you are using .live you cannot use the latest version of jQuery.

answered Feb 04 '13 at 21:50

Muleskinner

13,657
19
57
78

Collapsing the column of the table

2 Answers2