Question

There are button (id= “hide_message_button”) and message(id=”message”). The click on the button should hide/show the message. The source code:

$('#hide_message_button').click(function(){
   var bool = $('#message').css('visibility','hidden').is(':hidden');
   if(bool){
      $('#message').show();
      $(this).val('Hide');
   }
   else {
      $('#message').hide();
      $(this).val('Show');
   }
});

I have a bug: the message is hidden with first click on the button and didn’t shown again (but button’s value is changed to ‘Show’). What’s wrong? Thanks.

Answer 1

Try:

$('#hide_message_button').click(function(){
    $('#message').toggle();
});