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 discuss@jquery.com http://jquery.com/discuss/