Fade-in Spoiler Revealer

By: Chris Coyier on April 14th, 2008 — Posted in: Quick Tip / Trick

jQuery has some really simple built in features for “fading in” and “fading out” different page elements. I thought we could exploit some of those functions for a really simple Spoiler Revealer.

VIEW DEMO - DOWNLOAD FILES

Between some smart CSS and jQuery, we can keep our markup really clean. Take a look at the usage here:

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

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. Check out the code:

<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>

Super simple. Just a quick little example to show how nice and easy jQuery is to work with and how it can compliment and extend what you are already doing with CSS!

Theoretically Related Articles:

Discussion Elsewhere

Делаем простейший спойлер — Чернев.ру — April 15, 2008
pgdesigning | Priyantha’s BLOG » Fade-in Spoiler Revealer — April 15, 2008
» Fade-in Spoiler Revealer Webcreatives — April 15, 2008
Ajaxian » Spoiler Blocker When JS Isn’t Available — April 17, 2008
Spoiler Revealer – Ocultar contenido adicional con jquery « Xyberneticos — April 21, 2008
Revelador de Spoilers | RuanWeb — April 21, 2008
Best Of April 2008 | Best of the Month | Smashing Magazine — April 30, 2008
Best Of April 2008 - Glimpses of the Aleph — May 9, 2008

Responses

1

Awesome tidbit!

Now… how long before we see “jquery-tricks.com?” LOL!

Comment by Erika — April 14, 2008 @ 10:01 am
2

Thanks Chris, that’s what I needed!

Comment by David — April 14, 2008 @ 10:09 am
3

Nice idea Chris! Thanks for spoiling The Village for me though! Actually, I thought The Village was pretty good.

Comment by David Walsh — April 14, 2008 @ 10:53 am
4

$(this).parents(”p”).children(”span.spoiler”).fadeIn(2500);
could be easily replaced with

$(this).next().fadeIn(2500)

Have fun with jQuery

Comment by Romz — April 14, 2008 @ 11:32 pm
5

Now… how long before we see “jquery-tricks.com?” LOL!

i thought the same thing :p

Comment by V1 — April 15, 2008 @ 12:15 am
6

Thanks

Comment by David Madden — April 15, 2008 @ 4:01 am
7

This is an interesting trick, but to absolutely avoid spoiling everyone, it should probably follow principles of progressive enhancement:

To keep from spoiling people with no JavaScript support, including people reading the content in a feed reader or on a mobile device, you should prepend many, many br tags before the spoiler, as well as a message saying to scroll down to read the spoiler. You could then use your jQuery code to render the br tags and the “scroll to read” message invisible. Your function to render the spoiler itself visible would leave the br tags and the message invisible. The result would be a spoiler alert that works well for everyone, regardless of user-agent capabilities.

Comment by Brian Dillard — April 16, 2008 @ 11:57 am
8

I decided to mock up and blog about the enhancement I suggested in comment 7 above. Here’s the link:

http://blogs.pathf.com/agileajax/2008/04/jquery-fade-in.html

Comment by Brian Dillard — April 16, 2008 @ 2:01 pm
9

I tried to do this..
But I cant!
I used the:
script type=”text/javascript” src=”MY OWN URL I UPLOADED THE .JS”> /script>

$(document).ready(function() {

$(”span.spoiler”).hide();

$(’Reveal Spoiler >> ‘).insertBefore(’.spoiler’);

$(”a.reveal”).click(function(){
$(this).parents(”p”).children(”span.spoiler”).fadeIn(2500);
$(this).parents(”p”).children(”a.reveal”).fadeOut(600);
});

});
/script>

And in the text..
p>In the movie Citizen Kane, Charles Foster Kane’s last word “Rosebud”
turns out to span class=”spoiler”>be a sled. /span> /p>

And it doesnt makes the spoiler.. dont know why.. :S
I had to take out the > other ones b/c it erases that part..
any help? using blogger… :S

Comment by http://www.nitosblog.com/ — April 19, 2008 @ 10:01 pm
10

Can you put up an example page where you are getting the problem so we can take a look at it? Seems like you are doing it right…

Comment by Chris Coyier — April 20, 2008 @ 7:55 am
11

hey great trick there, really makes me feel to implement in my website.
Skillsheaven

Thanks.

Comment by Mahavir — May 1, 2008 @ 11:41 am