jQuery Fade-in Spoiler Revealer and JavaScript Spoiler Blocker

Chris Coyier over at CSS-Tricks has made a jQuery baed “Fade-in Spoiler Revealer”, that allow the user to click on a div that blocked view of the spoiler and see the contents. That’s right, just “spoiler” in a span with the class of spoiler. The jQuery will find and hide all of this text, and replace it with a “reveal spoiler” button. Upon clicking that button, the button fades away and is replaced with the text from inside the span.

Here’s the code:

<p>In the movie Citizen Kane, Charles Foster Kane's last word "Rosebud"
turns out to be a sled.</p>

jQuery:

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() {


	$("span.spoiler").hide();
	 $('<a class="reveal">Reveal Spoiler &gt;&gt;</a> ').insertBefore('.spoiler');
	$("a.reveal").click(function(){

		$(this).parents("p").children("span.spoiler").fadeIn(2500);

		$(this).parents("p").children("a.reveal").fadeOut(600);

	});

}); </script>

Demo | Download

Pages: 1 2