显示/隐藏按钮而不重新加载页面

Question

我正在寻找（显示/隐藏）按钮来显示如下表格：

点击了（显示）：

Button (Show) changes to (Hide) and the table appears.

点击（隐藏）：

Button (Hide) changes to (Show) and the table disappears.

Answer 1

<input type="button" id="button" value="hide" /> 

$(function(){
   var button = true;
   $('#button').on('click', function(){
      $('#button').toggle();
      if (button){
         button = false;
         $('#button').val('hide');
      } else{
         button = true;
         $('#button').val('show');
      }
   });
})

Answer 2

缓慢的方式，但现在我已经成了小提琴：

http://jsfiddle.net/j3zxH/1/

$(document).ready(function() {
        $('.toggle').click(function(){

                var collapse_content_selector = $(this).attr('href');                   

                var toggle_switch = $(this);
                $(collapse_content_selector).toggle(function(){
                        if($(this).css('display')=='none'){
                            toggle_switch.html('Show');
                        }else{
                            toggle_switch.html('Hide');
                        }
                });
        });

});