I'm currently trying to create a spoiler hiding addon for a forum using
jQuery. I basically want to have all Ps, DIVs and SPANs with a class of
.spoiler inside of #Comments .CommentBody to autohide the text and provide a
clickable "Spoiler: click to show" that, when clicked, shows the hidden text
and changes to "Spoiler: click to hide".
The following entered into the comments:
Some text here about a wonderful <span class="spoiler">spoiler that will
ruin some people's day</span>. And then some more text in the paragraph.
Would come out looking like this:
Some text here about a wonderful Spoiler: click to show. And then some more
text in the paragraph.
And when you click on it, like this:
Some text here about a wonderful Spoiler: click to hide - spoiler that will
ruin some people's day. And then some more text in the paragraph.
As you can see I want this to work inline as well as on block elements. I
also want to allow multiple of these on a page. I have had a small amount
of success using:
$(document).ready(function () {
$('span.spoiler').hide();
$('span.show').click(function() {
$(this).next('span.spoiler').slideToggle('fast');
});
});
The prblem with this is that it only works on SPANs, needs a manually
entered "Click to show" span and the .hide functionality in jQuery applies
display:block; when unhiding stuff, which isn't ideal. Would a way to do
this be to have some CSS to set visibility:hidden; for .spoiler, and then
when the "Click to show" is activated, the class gets changed to
visibility:visible;? If so, how do I go about this?
What would I need to use to create the toggle link?
Thanks :)
Luke
--
View this message in context:
http://www.nabble.com/Creating-a-visible-link-to-show-and-unhide-content.-tf3402869.html#a9476935
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
