tutorial #1: Spoiler Revealer

The third and final demo in this tutorial is the Spoiler Revealer. You will see how to create spoiler revealer buttons by exclusively using jQuery to insert them in the webpage. You can insert elements to or remove elements from your webpage through jQuery.

Below is a demonstration of spoiler revealer. Click on each button to reveal movie ending.

the usual suspects (1995) - Kevin Spacey was actually Keyser Soze.

the sixth sense (1999) - Bruce Willis is a ghost

Mulholland Drive (2001) - Um.....stuff happened, so....yeah

The How-To

HTML

   



<section>

<h2>Movie Spoilers!</h2>

<p>the usual suspects (1995) - 
<span class="ending">Kevin Spacey was actually Keyser Soze.</span>
</p> 

<p>the sixth sense (1999) - 
<span class="ending">Bruce Willis is a ghost</span>
</p>

<p>Mulholland Drive  (2001) - 
<span class="ending">Um.....stuff happened, so....yeah</span>
</p>

</section>

CSS


section {
	background:#2B83A8;
	height:50px;
	margin-bottom:20px;
}

section p {
	color:#FFFFFF;
	margin:20px auto;
}

jQuery

		
$(document).ready(function(){
// This is needed to make the document ready and functional.
  $('.ending').hide();
//This method will hide elements with a designated attribute. 
  $('<input type="button" class="revealer" value="Are Sure? This is Your Last Chance "/>').insertBefore('.ending');
//This line will insert new elements to the webpage, like the button here.
//The button will be place before the designated element by using the 'insertBefore.()' method.
  $('.revealer').click(function(){
//This will trigger the event, when the button is click on. 
    $(this).hide();
//Once the button is click on, '$(this).hide()' will remove the element.
    $(this).next().fadeIn();
//Will fade in the original element.  
  });
});//Close it out.