hide-show

by narensrinivasans

HTML

<p id="hideButton">Hide</p>
<p id="showButton">Show</p>
<p id="toggleButton">Toggle</p>
<div id="status">Disclaimer <span></span></div>
<p id="disclaimer">Disclaimer</p>

CSS

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

JavaScript

$('#hideButton').click(function() {
    $('#disclaimer').hide();
    $('#status span').text('Hidden');
});
$('#showButton').click(function() {
    $('#disclaimer').show();
    $('#status span').text('Shown');
});
$('#toggleButton').click(function() {
    $('#disclaimer').toggle();
    $('#status span').text('Toggled');
});