jQuery Fade-in Spoiler Revealer and JavaScript Spoiler Blocker

Chris Coyier over at CSS-Tricks has made a jQuery baed “Fade-in Spoiler Revealer”, that allow the user to click on a div that blocked view of the spoiler and see the contents. That’s right, just “spoiler” in a span with the class of spoiler. The jQuery will find and hide all of this text, and replace […]

Chris Coyier over at CSS-Tricks has made a jQuery baed “Fade-in Spoiler Revealer”, that allow the user to click on a div that blocked view of the spoiler and see the contents. That’s right, just “spoiler” in a span with the class of spoiler. The jQuery will find and hide all of this text, and replace it with a “reveal spoiler” button. Upon clicking that button, the button fades away and is replaced with the text from inside the span.

Here’s the code:

<p>In the movie Citizen Kane, Charles Foster Kane's last word "Rosebud"
turns out to be a sled.</p>

jQuery:

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() {$("span.spoiler").hide();$('<a class="reveal">Reveal Spoiler &gt;&gt;</a> ').insertBefore('.spoiler');$("a.reveal").click(function(){ $(this).parents("p").children("span.spoiler").fadeIn(2500); $(this).parents("p").children("a.reveal").fadeOut(600); });}); </script>

Demo | Download