Problem hiding element when button is clicked

I try to hide the text with a bu开发者_C百科tton click, not sure how it is done:..

<script type="text/javascript">
   $('.HideButton').click(
      function () {
         $('#disclaimer').hide();
      }
   );
</script>

The body:

<p id="disclaimer" > DDDDDDDDDDDDDDDDDDDDDDDDDD</p>
<asp:Button ID="Button1" CssClass="HideButton"  runat="server" Text="Hide" />

You need to wrap it in the ready handler, but apart from that it should work:

$(function() {
    $('.HideButton').click(function () {
        $('#disclaimer').hide();
    }); 
});

(demo - slighty changed in order to overcome ASP dependency.) Do note, that the button may have other side-effects, too, cf. @Zootius' answer.

Your button should not be an asp:Button. Do this instead.

<input type="button" value="Hide" class="HideButton" />

This is because the asp:Button causes a full postback on click (check your page source - it renders as a form-submit button).

Put it in "document.ready"

document.ready(function() {
     //Your code here
});

Try:

<script type="text/javascript">
$(document).ready(function(){
$('.HideButton').click(function () {
    $('#disclaimer').hide();
  }); 
});
</script>

You need to tell the browser when to add the listener to the button. Usually that is done in the ready function because you want it always as soon as the page is rendered.