Luke,
To get around the DIV/SPAN issue, try adding/removing classes.
Try this:
$(document).ready(function () {
$('.spoiler').addClass('hide');
$('.show').toggle(function() {
$(this).html('(hide me)').next('.spoiler').removeClass('hide');
},function(){
$(this).html('(show me)').next('.spoiler').addClass('hide');
});
});
Just set a .hide {display:none} rule in your CSS.
Good Luck,
________
SEAN O
[-Stash-] wrote:
>
> <p>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
> <em>.spoiler</em> inside of <em>#Comments .CommentBody</em> 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".</p>
>
> <p><strong>The following entered into the comments:</strong><br />
> <code style="margin-left:5em;"><pre>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.</pre></code></p>
>
> <p><strong>Would come out looking like this:</strong></p>
>
> <p style="margin-left:5em;">Some text here about a wonderful <span
> style="color:#00f;text-decoration:underlined;">Spoiler: click to
> show</span>. And then some more text in the paragraph.</p>
>
> <p><strong>And when you click on it, like this:</strong></p>
>
> <p style="margin-left:5em;">Some text here about a wonderful <span
> style="color:#00f;text-decoration:underlined;;">Spoiler: click to hide
> -</span> <span style="font-style:italic;color:#f00;">spoiler that will
> ruin some people's day</span>. And then some more text in the
> paragraph.</p>
>
> <p>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:</p>
>
> <div><code><pre> $(document).ready(function () {
> $('span.spoiler').hide();
> $('span.show').click(function() {
> $(this).next('span.spoiler').slideToggle('fast');
> });
> });</pre></code></div>
>
> <p>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?</p>
>
> <p>What would I need to use to create the toggle link?</p>
>
> <p>Thanks :)</p>
>
> <p>Luke</p>
>
--
View this message in context:
http://www.nabble.com/Creating-a-visible-link-to-show-and-unhide-content.-tf3402869.html#a9477505
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
