用'顯示更少'替換'顯示全部'按鈕onClick？

Question

我目前使用「顯示全部」一個表按鈕來顯示所有的表項：

http://jsfiddle.net/SCpgC/

不過，我想知道，是有辦法，我可以切換「顯示全部」顯示單擊時「顯示較少」，以便用戶可以返回到以前的視圖？

這是當前的JavaScript我使用：

var numShown = 2; // Initial rows shown & index 

    $(document).ready(function() { 
     // Hide rows and add clickable div 

     $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>'); 

     $('.more').click(function() { 
      var numRows = $(this).prev().find('tr').show(); 
      $(this).remove(); 
     }) 
    }); 

非常感謝任何指針:-)

Answer 1

這將是雙向的......如果兜底它顯示DIV如果揭示少它隱藏在div

試試這個

working fiddle here

$('.more').click(function() { 
    if ($(this).hasClass("show")) { 
     var numRows = $(this).prev().find('tr').show(); 
     $(this).text('Reveal Less'); 
     $(this).removeClass('show').addClass('hide'); 
    } 
    else { 
     $(this).prev().find('tr:gt(' + (numShown - 1) + ')').hide(); 
     $(this).removeClass('hide').addClass('show'); 
     $(this).text('Reveal All'); 
    } 
}); 

和使用等等我的影響fadeIn()和​​

fiddel with effect

Answer 2

我覺得這個代碼應工作：

var numShown = 2; // Initial rows shown & index 
$(document).ready(function() { 
    // Hide rows and add clickable div 
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>'); 
    $('.more').click(function() { 
     if ($(this).text()=="Reveal All") { 
      $('table').find('tr:gt(' + (numShown - 1) + ')').show(); 
      $(this).text("Reveal less"); 
     } else { 
      $('table').find('tr:gt(' + (numShown - 1) + ')').hide(); 
      $(this).text("Reveal All"); 
     } 
    }); 
}); 

Answer 3

var numShown = 2; // Initial rows shown & index 
var hideText = 'Hide all'; 
var revealText = 'Reveal all'; 

$(document).ready(function() { 
    // Hide rows and add clickable div 

    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">' + revealText + '</div>'); 
    var numRows; 
    $('.more').toggle(function() { 
     numRows = $(this).prev().find('tr').show(); 
     $(this).text(hideText); 
    }, function() { 
     numRows = $(this).prev().find('tr').hide(); 
     $(this).text(revealText); 
    }); 
}); 

編輯：對不起，忘了切換不能用於直播/上

Answer 4

試試這個：

var numShown = 2; // Initial rows shown & index 
$(document).ready(function() { 
    // Hide rows and add clickable div 
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>'); 
    $('.more').on('click',function() { 
     if ($(this).text()=="Reveal All") { 
     $(this).prev().find('tr:gt(' + (numShown - 1) + ')').show(); 
      $(this).text("Reveal less"); 
     } else { 
      $(this).prev().find('tr:gt(' + (numShown - 1) + ')').hide(); 
      $(this).text("Reveal All"); 
     } 
    }); 
}); 

UPDATE：這應該返回表的確切先前的狀態（不會隱藏一切）。還增加了。對（）方法，而不是。點擊（）