is: visible

by narensrinivasans

HTML

<p id="toggleButton">Click Here</p>
<div id="status">Disclaimer <span></span></div>
<p id="disclaimer" style="display: none;">Disclaimer</p>

CSS

#toggleButton {
    background: whitesmoke;
    border: 1px solid gray;
    cursor: pointer;
    color: grey;
    display: inline-block;
    padding: 4px 12px;
}
#toggleButton:hover {
    border-color: black;
    color: black;
}
#disclaimer {
    color: green;
}
#status span {
    color: red;
}

JavaScript

$('#toggleButton').click(function() {
    
    $('#disclaimer').toggle();
    
    if ($('#disclaimer').is(':visible')) {
        $('#status span').text('Shown');
    } else {
        $('#status span').text('Hidden');
    }
});

if ($('#disclaimer').is(':visible')) {
    $('#status span').text('Shown');
} else {
    $('#status span').text('Hidden');
}