jQuery Spoilers plugin demo

(return to main page)

You can download the latest (possibly pre-release) Spoilers plugin code here. That file contains the full documentation for the plugin. If you want a PACK'd or MIN'd version, please grab one of the released versions from the plugin's home page.

The following spoiler is revealed when you move the mouse over it:
This text should be hidden if you are not mouse-overing it.

The following spoiler is revealed when you move the mouse over it, but uses the hoverIntent plugin to avoid prematurely revealing the text:
This text should be hidden if you are not mouse-overing it.

The following spoiler is toggled when you CLICK on it:
This text should be hidden until you click on it.

You may note that if you move the mouse very close to the right-side edge of a hover-mode spoiler then it flickers in and out of spoiler mode very quickly. This is an unfortunate side-effect of the shift in position of the hot-spot of the native mouse pointer when it changes between "pointer" and "text" modes. There is no way to fix that from within this plugin.

Source code for this demo:



The HTML code can be seen by viewing the source code for this file.
The graphic file used above is here:
spoilers.png.
[Pedantic note: that is NOT the same graphic as the one on imdb.com, though it looks similar.
This graphic file is released into the Public Domain.]




The CSS for this demo is: