CSS class toggle example

by rightson

HTML

<button id="append">Append Text</button>
<button id="hide">Toggle Hide</button>
<div id="container">
    <span class="red">Hello</span>
    <span class="blue">Scott!<br /></span>    
</div>

CSS

.red {
    color: red;
}
.blue {
    color: blue;
}

.hide {
    color: black;
    display: none;
}

JavaScript

$('#container').append('<span class="appended">How are you?</span><br />');

var HideYourElement = (function() {
    var status = true;       
    return {
        toggleClass: function () {
            $('.appended').toggleClass('hide');
            status = !status;
        },
        decorateAddedElement: function (element) {
            elem = $(element);
            elem.addClass('appended');
            if (!status) elem.addClass('hide');
            return elem;
        }        
    }   
})();

$('#append').click(function() {
    var elem = $('<span>Fine thank you!</span>');
    elem = HideYourElement.decorateAddedElement(elem);
    $('#container').append(elem.append('<br>'));
});

$('#hide').click(function() {
   HideYourElement.toggleClass(); 
});