Fade-in Spoiler Revealer

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

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!