Tap to Reveal

This is likely the quickest (and easiest) to implement do-it-yourself tap-to-reveal method out there.

1. Put an image or other content in a div.

2. Put a link to tap somewhere on the page.

3. Put the JavaScript on the page.

You are good to go.

An issue of the Friday Photo Series contains a live demo. Find the link under "Slightly Spooky" — below the regular images.

Tap the link on that page and the slightly spooky image is revealed.

This easy-to-implement method only reveals content. There is no code to un-reveal or hide what has been revealed.

If you need code to both reveal and hide content, the Powerhouse JavaScript Function for Show/Hide may be the solution you're looking for.

Implementing It

As promised, there are just three parts.

Part 1:

Put this on your page where the image and/or other content is to appear.

<div id="tap-to-reveal-container" style="display:none">
[image/text to reveal]
</div>

The id value tap-to-reveal-container may be changed. The div may have any style so long as display:none remains.

Replace [image/text to reveal] with the image and/or other content to reveal.

Part 2:

Here is the link to tap. Put it where you want the link to publish on the page.

<span id="tap-to-reveal-link" style="display:inline">
<a href="javascript:RevealOnTap('tap-to-reveal-link','tap-to-reveal-container')">Reveal picture (or text)</a>
</span>

The first and last lines are the beginning and ending of the span tag. The line between those two is the link.

The id value tap-to-reveal-link in the span tag may be changed. If changed, the corresponding tap-to-reveal-link value in the link parameter must also be changed.

The tap-to-reveal-container value is the id value of the div in Step 1. If the id value was changed in the div, then make the corresponding change in the link parameter.

Part 3:

This is the JavaScript. No customization is necessary.

<script type="text/javascript">
function RevealOnTap(d1,d2)
{
    document.getElementById(d1).style.display = "none";
    document.getElementById(d2).style.display = "block";
}
</script>

Put the JavaScript anywhere on the page. Immediately above the closing </body> tag would work.

Test, Of Course

A quick test can reveal inadvertent mistakes or errors. If the tap-to-reveal method works as expected, then also have a look at the content thus revealed. Verify the image displays as you intended and that any text is free of typographical errors.

Give the quick and easy tap-to-reveal method a try.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager