How to show/hide DOM element with jQuery?
<p>There are button (id= "hide_message_button") and message(id="message"). The click on the button should hide/show the message. The source code:</p>

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

<p>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.</p>
