Demo 2 :: Revealing

There are thousands of blogging sites around the internet. Some of them display information like spoilers to movies or books. Users who have not seen these movies or read the books may not want to read the spoilers and ruin the surprise for them. To counteract this problem, sites usually hide the spoilers and the user has the choice to reveal the spoiler. The same idea can be used for online tests or quizzes. You can ask the question and the user can click a button to reveal the answer if they choose. JQuery makes revealers very easy and flashy.

Spoiler Alert!

Dumbledore dies!

View the HTML code

<h3 id="spoilerHeader">Spoiler Alert!</h3>
<p id="spoiler">Dumbledore dies!</p>

View the jQuery code

$(document).ready(function(){
	$('<input type="button" value="Reveal the Spoiler!" id="revealButton">').insertAfter('#spoilerHeader');
	$('#spoiler').hide();
	$('#revealButton').click(function(){
		$(this).hide();
		$('#spoiler').fadeIn(); 
	});
});