Show/Hide button without reload page

问题

I'm looking for a (Show/Hide) button to show a table like this:

clicked in (Show):

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

clicked in (Hide):

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

回答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');
      }
   });
})

回答2:

Way to slow, but now that i allready made the fiddle:

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');
                        }
                });
        });

});

来源：https://stackoverflow.com/questions/20971580/show-hide-button-without-reload-page