Question

I need to change text on click in one div with jquery. Like this:

$(document).ready(function() {
$("#hideall").click(function() {
$("#hideall").html("<p>SHOW</p>");
});
});

HTML is:

<div id="hideall" title="Hide all" name="Hide all">
<p>HIDE</p>
</div>

The problem is, it should be like div that shows state, when it’s hidden, it shows

<p>SHOW</p>

and when it’s showed it’s

<p>HIDE</p>

I realized that should work with “if” function, but can’t break it down. Any help? Thanks.

Answer 1

You could create a variable to check for this state,.

$(document).ready(function() {
var isHidden = false; 
$("#hideall").click(function() {
if(isHidden){
    $(this).html("<p>SHOW</p>");
    isHidden = false;
}
else{
   $(this).html("<p>Hidden</p>");
   isHidden = true;
}
});//end click function
});//end ready