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.
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 >></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!
Awesome tidbit!
Now… how long before we see “jquery-tricks.com?” LOL!
Thanks Chris, that’s what I needed!
Nice idea Chris! Thanks for spoiling The Village for me though! Actually, I thought The Village was pretty good.
$(this).parents(“p”).children(“span.spoiler”).fadeIn(2500);
could be easily replaced with
$(this).next().fadeIn(2500)
Have fun with jQuery
i thought the same thing :p
Thanks
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.
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
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
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…
hey great trick there, really makes me feel to implement in my website.
Skillsheaven
Thanks.
Any idea on how to make the revealed text a link?
In other words, in your example above if you wanted to link the revealed answer to an imdb.com page, how could you do it without making the “reveal” text a link?
Chris, I think to validate you need to escape the closing a tag.
Reveal Spoiler >></a>
should be:
Reveal Spoiler >><\/a>
That validates and seems to work without problems.