Fade-in Spoiler Revealer

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

spoilerrevealer.jpg

jQuery has some really simple built in features for “fading in” and “fading out” different page elements. I thought we could exploit some of those functions for a really simple Spoiler Revealer.

View DemoDownload Files

Between some smart CSS and jQuery, we can keep our markup really clean. Take a look at the usage here:

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

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. Check out the code:

<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>

Super simple. Just a quick little example to show how nice and easy jQuery is to work with and how it can compliment and extend what you are already doing with CSS!