Spoiler Button

Before we begin here are some terms that you should become familiar with!

click()

Binds an event handler to the click function which will trigger an action when the element is bound to is clicked.

What You'll Be Learning

You will be learning to add a spoiler button to your site.

Spoiler buttons can be used to make an answer to a question hidden until the desired time.

How to execute.

What should you know?

To begin with the spoiler button you must first make sure you have aquired all of the proper scripts given to you in the first lesson.

Steps

First you will make a span tag with the class of spoiler and put your answer inside of it.

From there you will build your question options and your question.

From there you will write you scripts and styles like the ones listed two columns down.

After that you should have a working spoiler button and be able to show and hide text at the click of a button!

Example

Question Number 1?

Choice Number 1

Choice Number 2

Choice Number 3

Choice Number 4

Answer Number 1!

Code Required

HTML Markup

<h1> Question Number 1?</h1> 
    <p> Choice Number 1</p>
     <p> Choice Number 2</p>
      <p> Choice Number 3</p>
       <p> Choice Number 4</p>
    <span class="spoiler">Answer Number 1!</span>

CSS Markup

	.revealer{
	text-align:center;
	font-size:25px;
	padding-left:30px;
}
.spoiler{
	text-align:center;
	font-size:25px;
	padding-left:30px;
}

Javascript Markup 

$(document).ready(function() {  //sets the document ready function
  $('.spoiler').hide(); //hides the class of spoiler
  $('<input type="button" class="revealer" value="Answer"/>').insertBefore('.spoiler'); //inserts button before spoiler 
  $('.revealer').click(function(){ //adds click function to revealer
	  $(this).hide(); // this hides it
	  $(this).next().fadeIn(); // then it fades in the information
  }); //closes the click function
});//end document

Back