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…it will be hidden until you click the button..
</div>
That’s it.. Test it using the example below:
Posted in general |
Very Cool. Simple Code with great effeect..
Well, you forgot the ‘#’ in your examples 😀
oh, yes, i just noticed.. hahaha.. thanks 😀