Using jQuery to reveal more of a document a bit at a time

Here is the simple jQuery code and even simpler markup that you can use to provide one or more revealable sections to your HTML document. For example you might use this in a quiz where you want to initially set the question, then give a hint then give the answer.

Boring example

Question : What is the largest planet in the solar system?

Hint: It is a lot further away from the sun than the Earth

Answer: Jupiter.

Click for hint and the answer

Here's how to do it

1Put the following code into the HEAD:

<script src="jquery.js" type="text/javascript"></script>
<script src="revealwp.js" type="text/javascript"></script>
<link href="reveal.css" rel="stylesheet" type="text/css">
<script>
    jQuery(document).ready(function($){
      InitialiseReveal($);
    });
</script>

Hack jquery.js to wherever yours is and whatever its called.
revealwp.js is downloadable here
reveal.css is downloadable here
The slightly non-standard calling convention to InitialiseReveal() is to allow it to be used as-is in Wordpress
2 Wrap the section(s) you want revealable in DIVs

<div class=revealable>
Hint: It is a lot further away from the sun than the Earth
</div>

3 Add the button as follows

<div class=showMore>
  <span class=revealButton>Click for hint and the answer</span>
</div>