按钮不在jQuery中切换

Question

My HTML:

<input type="button" id="toggleButton" value="toggle" />
<h3 id="disclaimer"> We do not guarentee the validity of the data </h3>

JavaScript/jQuery:

$("#toggleButton").click( function() {
    if($("#toggleButton").is(":visible")){
        $("#disclaimer").hide();
    }else {
        $("#disclaimer").show();
    }
});

The disclaimer is supposed to be toggled between hidden and visible, whenever the button is pressed, hiding the disclaimer is just fine however once hidden it is not becoming visible again.

Help is needed in this regard.

Answer 1

You could use .toggle() .

$("#toggleButton").click( function() {
   $("#disclaimer").toggle();
});

The working demo.

Answer 2

Of course, as you check if the button is visible, and because the button is always visible, the disclaimers hide function is called all the time. you need to check, if disclaimer is visible or not...

$("#toggleButton").click( function() {
    if($("#disclaimer").is(":visible")){
        $("#disclaimer").hide();
    }else {
        $("#disclaimer").show();
    }
});

Answer 3

Your javascript code should be like this:

$("#toggleButton").click( function() {
    if($("#disclaimer").is(":visible")){
        $("#disclaimer").hide();
    }else {
        $("#disclaimer").show();
    }
});