CODEWITHSUNDEEP
javascriptjquerycss
Dmitry Makovetskiyd
Dmitry Makovetskiyd

Reputation: 7053

Problem hiding element when button is clicked

I try to hide the text with a button 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" />

Upvotes: 0

Views: 84

Answers (4)

jasalguero
jasalguero

Reputation: 4181

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.

Upvotes: 0

James McCormack
James McCormack

Reputation: 9934

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).

Upvotes: 2

Gasim
Gasim

Reputation: 7961

Put it in "document.ready"

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

Upvotes: 0

jensgram
jensgram

Reputation: 31508

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.

Upvotes: 5

Related Questions