Word Reveal Demo

jQuery plugin demo that reveals one word each click.

HTML

Click on the #BADA55 boxes!
<p id="firstRevealer"></p>
<p id="secondRevealer"></p>
<p id="thirdRevealer"></p>

CSS

p { padding: 10px; margin:10px; min-height:25px; background-color:#BADA55 }

JavaScript

$(document).ready(function() {
    $("#firstRevealer").wordReveal({text:"This reveals one word at a time."});
    
    $("#secondRevealer").wordReveal({text:"Adding more text is easy!"});
    
    $("#thirdRevealer").wordReveal({text:"It <b>also</b> works on <em>some</em> tags, since it splits on <b>spaces</b>!"});
});


;(function ($) {
    $.fn.wordReveal = function( options ) {
	    
		var settings = $.extend({
            text: "Check me out on GitHub: <br>https://github.com/mathieujonson/word-reveal"
		}, options );
		
		var words = settings.text.split(" ");
        
	    $(this).click(function() {
		    //get the current html within container
		    var currentText = $(this).html().split(" ");

            //if the text has all been revealed, return
	    	if(words.length+1==currentText.length) {
				return $(this);
			}
				
   			$(this).html($(this).html() + " " + words[currentText.length - 1]);				
		});
	};
} ( jQuery ));