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

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();
    }
});