I have a table for which I want to display only the first row by default, but display additional X number of rows if a user clicks a "show more" link (and inversely hide the X rows if the user then clicks "show less").

To exemplify, I want the default view when the page loads to be like so:

 Top Scores
====================================
|   1 | show this row always!      |
====================================
 -show more-

Then, if a user clicks "show more", the table should expand with additional rows and look like this:

 Top Scores
====================================
|   1 | show this row always!      |
|   2 | newly displayed row        |
|   3 | newly displayed row        |
|   4 | newly displayed row        |
|   5 | newly displayed row        |
====================================
 -show less-

Then obviously if a user clicks "show less" the table returns to default (showing only the first row again).

I'm familiar with the .toggle() function in jQuery, but not sure if it can be applied here or if I have to do more manual work.

Thanks!

I have a table for which I want to display only the first row by default, but display additional X number of rows if a user clicks a "show more" link (and inversely hide the X rows if the user then clicks "show less").

To exemplify, I want the default view when the page loads to be like so:

 Top Scores
====================================
|   1 | show this row always!      |
====================================
 -show more-

Then, if a user clicks "show more", the table should expand with additional rows and look like this:

 Top Scores
====================================
|   1 | show this row always!      |
|   2 | newly displayed row        |
|   3 | newly displayed row        |
|   4 | newly displayed row        |
|   5 | newly displayed row        |
====================================
 -show less-

Then obviously if a user clicks "show less" the table returns to default (showing only the first row again).

I'm familiar with the .toggle() function in jQuery, but not sure if it can be applied here or if I have to do more manual work.

Thanks!

• javascript
• jquery
• html
• css

7 Answers 7

No additional classes, no headers required - http://jsfiddle/wgSZs/

$('table').find('tr:gt(0)').hide();

$("button").on("click", function() {
    $('table').find('tr:gt(0)').toggle();
});

UPDATE

It might be better to hide the additional rows via CSS instead of jQuery to avoid element shifting while the JS is being downloaded and applied. But still no need to add classes - it's a good idea to keep your markup as clean as possible. You can do this:

table tr { display: none }
table tr:first-child { display: block }

Here is the working example - http://jsfiddle/wgSZs/1/

if you mark the added rows with a class like .collapsible, then you can easily toggle their visibility in javascript.

$('.collapsible').show() or $('.collapsible').hide() or $('.collapsible').toggle()

http://jsfiddle/iambriansreed/uwfk8/

var initial_rows_to_show = 2;

(function(_rows){    
    _rows.hide();
    $('a.more').toggle(function(){
        _rows.show(); $(this).text('less');
    },function(){    
        _rows.hide(); $(this).text('more');
    });
})($('tr:gt(' + (initial_rows_to_show - 1) + ')'));

You can do this by hiding of a table & displaying only

$('thead').click(function(){

  $('tbody').show();
})

OK, so after typing the whole question out, StackOverflow decided to show me a relevant related question. :)

It looks like I can use the gt selector via jQuery to toggle only rows greater than a specified row number, which should be perfect for what I want to achieve.

Sorry for the redundant question (assuming this will work for me, have not yet tried it)!

Toggle would work perfectly:

$('#show-link').toggle(function(){

} , function(){

});

Here you go...working example at jsFiddle:

http://jsfiddle/ndFgF/8/

<table width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th width="25%" id="expand" scope="col">Show More</th>
    <th width="25%" scope="col">&nbsp;</th>
    <th width="25%" scope="col">&nbsp;</th>
    <th width="25%" id="collapse" scope="col">Show Less</th>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Note that the data attribute in the table rows are referenced in the jQuery below:

<script>
$("#collapse").click(function() {
      $("[data-rows='togglerow']").hide(400);
    })
$("#expand").click(function() {
      $("[data-rows='togglerow']").show(400);
    })
</script>

I used the 'data' attribute instead of class name because I like to keep those separate...you can use a class name if you'd like, but don't use ID because it's not a proper way to do it (IDs are supposed to be unique, not repeated).