Geek asks and answers

Toggle the visibility of additional table rows

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

To illustrate this, I want the default view when loading the page to look like this:

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

Then, if the 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 the user clicks "show less", the table returns to default (only the first row is shown).

.toggle() jQuery, , , .

!

+5
7

, - http://jsfiddle.net/wgSZs/

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

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

CSS jQuery, JS. - - , . :

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

- http://jsfiddle.net/wgSZs/1/

+4

.collapsible, javascript.

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

+1

http://jsfiddle.net/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) + ')'));
+1

,

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

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

, StackOverflow .:)

, gt jQuery , , , .

(, , )!

0

Toggle :

$ ('# show link'). Switching (function () {

}, function () {

});

0
source

Here you go ... a working example in jsFiddle:

http://jsfiddle.net/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 rows of the table is specified in 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, not the class name, because I like to keep these separate ... you can use the class name if you want, but do not use the ID, because this is not the right way to do (identifiers should be unique, not repeated )

0
source

More articles:


All Articles