Very simple Spoiler with jQuery

This is the simplest implementation of jQuery to hide and show, or toggle an element of a page that is not necessary to be shown when the page loaded. Or in a simple word called a spoiler.

I wrote an article about creating a spoiler before, but not using jQuery, entitled Simple Spoiler.

The first thing you need to do is to put jQuery in your HEAD section.

<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
</head>

First, you have to create a button or a link to trigger the effect. But I prefer a button since many forum use a button for a spoiler.

<input type=”button” onclick=”$(‘#spoiler1’).toggle(500);” value=”Show/Hide Spoiler”/>
or
<input type=”button” onclick=”$(‘#spoiler1’).toggle(500);” value=”Toggle Spoiler”/>
or
<a href=”javascript:void(0)” onclick=”$(‘#spoiler1’).toggle(500);” > Show me! </a>

Create a special Div for your image/content, make it hidden first (the very simple way is by using style=”display:none;”).

<div id=”spoiler1” style=”display:none;”>
Your content here.. put some image, table, paragraph, anything… Open-mouthed smile it will be hidden until you click the button..
</div>

That’s it.. Test it using the example below:

 

Andi Setiawan

Loving husband - Caring Father - Slap bet Commissionaire (I wish) find my complete profile on: http://andisetiawan.com/about-me http://facebook.com/andiim3 - http://gplus.to/andiim3 - http://andiim3.com

3 thoughts to “Very simple Spoiler with jQuery”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.