Add/Remove Class

by narensrinivasans

HTML

<p id="addButton">Add Class</p>
<p id="removeButton">Remove Class</p>
<p id="toggleButton">Toggle Class</p>
<div id="status">Class <span></span></div>
<p id="disclaimer">Disclaimer</p>

<p class="note">// If Class added you can see the above element color changed to green</p>

CSS

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

JavaScript

$('#addButton').click(function() {
    $('#disclaimer').addClass('green');
    $('#status span').text('Added');
});
$('#removeButton').click(function() {
    $('#disclaimer').removeClass('green');
    $('#status span').text('Removed');
});
$('#toggleButton').click(function() {
    $('#disclaimer').toggleClass('green');
    $('#status span').text('Toggled');
});