JQuery-animated Spoiler BBCode

[JacquiiDesigns]

I've looked for a spoiler bbcode here at vB.org and did not find any to suit my need. So...

Brought to you by JacquiiDesigns.com (http://jacquiidesigns.com) - Here is a really nice spoiler bbcode that's animated with jquery. See a live example at BBCode Test: JPiC Forum For Writers (http://jpicforum.info/forum/recycle-bin/bbcode-test-6291.html#post35010)

Directions are simple as sugar-free apple pie:

Upload both "spoiler" and "images" folders to your forum root directory
Add Custom BB Code via your AdminCP: AdminCP ==> Custom BB Codes ==> Add New BB Code


Input the following info in your BB Code Manager:

Title: Spoiler Tag


BB Code Tag Name: spoiler


Replacement: <link rel="stylesheet" type="text/css" href="http://your_forum_url/forum/spoiler/spoiler.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".toggle_container").hide();

$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false;
});

});
</script>

<h2 class="trigger"><a href="#">Click To Show/Hide Hidden Content</a></h2>
<div class="toggle_container">
<div class="block">
{param}
</div>
</div>


Example: See? This is hidden text!


Description: This creates a hide/show spoiler tag that is hidden by default. Once the bar is clicked, the hidden contents will be shown.


Use {option}: No


Button Image: images/editor/spoiler.png


---------------
---------------

See example at http://jpicforum.info/forum/recycle-bin/bbcode-test-6291.html#post35010

PLEASE NOTE:
You'll need to edit in the replacement code your_forum_url/forum/ to be your own forum url.
If your forum url is http://www.mysite.com/forum/ -- then edit your replacement code to www.mysite.com/forum/

[Boofo]

I'll give it a shot. ;)

[JacquiiDesigns]

I'll give it a shot. ;)

((Gasp!))
I'm used to using your modifications - it's strangely awesome that you'd use something I share = Enjoy! :)

[FreshFroot]

Nice stuff Jacquii.

Like your spoiler version a lot and it usses jquery too :D

Thanks a bunch!

[JacquiiDesigns]

Nice stuff Jacquii.

Like your spoiler version a lot and it usses jquery too :D

Thanks a bunch!

You're very welcome Fresh = Enjoy ;)

[EddyMaxx]

Thanks this is great.

[KW802]

Jacquii, that is quite a nice looking spoiler tag! :cool:

[JacquiiDesigns]

Yeah - I like it.
I saw some others posted here - but none had the smooth transition as I liked - so I went hunting ==> thought I'd share :)

Ya'll enjoy.

[wat3v3r]

Haha i tried this on our forums and a very strange thing happened when i installed it. Whenever someone clicked on it to view the spoiler, it would show and hide, show and hide the message for like 5-6 times on it's own and then just hide back xD

[JacquiiDesigns]

Haha i tried this on our forums and a very strange thing happened when i installed it. Whenever someone clicked on it to view the spoiler, it would show and hide, show and hide the message for like 5-6 times on it's own and then just hide back xD

Click install and I may very well assist :P
Okay... Anyway - which browser did you see this issue in?

[wat3v3r]

Click install and I may very well assist :P
Okay... Anyway - which browser did you see this issue in?

Ah i uninstalled it as my users complained they were feeling like they were in sea or something with the screen going up and down xD

I was using Opera then, but the spoiler was working okay on your Demo, but kinda refused to work on our forum :/

[JacquiiDesigns]

Ah i uninstalled it as my users complained they were feeling like they were in sea or something with the screen going up and down xD

I was using Opera then, but the spoiler was working okay on your Demo, but kinda refused to work on our forum :/

Your users need a life vest. Nothing wrong with sea water :P

I use Opera about 99% of the time - the 1% is when I'm testing my site for cross-browser compatibility. So it's not an issue with opera. There may have been a javascript conflict - but I really cannot say without seeing it on your forum.

[Tanapangarap]

Neat. Thanks, Jacquii.

[JacquiiDesigns]

You're welcome Kevin = Enjoy!
I think I shall post this on TAZ too - may be of use to some members there.
Glad to see you here at the .org :)

[Mukashi]

Out of interest, any idea if this would work on vB4? The spoiler tag I've been using on my forum since 2004 has broken on our 4.1.1 beta test forum.

[JacquiiDesigns]

Out of interest, any idea if this would work on vB4? The spoiler tag I've been using on my forum since 2004 has broken on our 4.1.1 beta test forum.

In theory - it sure should. A bbcode is a bbcode.
Don't quote me on that though - I'm not very familiar with vB 4 - but yes - it should work.
Let us know if it does ;)

[godarmy]

it will be nice...if u add another icon to as alternatif...or PSD off the h2_trigger_a.gif...so it can be edited....

[JacquiiDesigns]

it will be nice...if u add another icon to as alternatif...or PSD off the h2_trigger_a.gif...so it can be edited....

I only shared the code and graphics I made for my own site.
You are free to create your own images. It's not too difficult.
I'll be happy to create a custom bar for you as a paid request .
PM me if interested :) Otherwise = Enjoy the spoiler code ;)

[Mr. Flowers]

I've installed this and I am also experiencing a flash open and close of the button.
www.streetfighter4forums.com

Edit: So removed /forum from the url and now it opens, closes and then opens for good. If I close it does the same thing. Close, open then permanent close.

M forum doesn't have /forum in the url. It has /board for the home page and /showthread for threads.

[JacquiiDesigns]

See the original post:

PLEASE NOTE:
You'll need to edit in the replacement code your_forum_url/forum/ to be your own forum url.
If your forum url is http://www.mysite.com/forum/ -- then edit your replacement code to www.mysite.com/forum/

But it looks like you've decided to go with another spoiler code from the looks of this (http://www.streetfighter4forums.com/showthread.php?t=5011). IDK...

[ViciousCode]

the script should go in the headerinclude template instead of the bbcode

[snowlion]

It didn't work with IE.

[JacquiiDesigns]

the script should go in the headerinclude template instead of the bbcode
That's another way to do it yes. But not the only way obviously.
And the placement of the javascript should not have any effect on how the bbcode functions.
I posted it this way in consideration of those who may not be very familiar with template edits. :)

It didn't work with IE.
IE sux and it's not on my supported list of browsers.
I didn't test the code in IE, as I don't use it personally except for checking cross-browser compatibility issues. It does seem to work just fine for me in Opera, Firefox, Chrome, Safari and a host of other browsers - so perhaps IE is at fault...?
I will ask though - which version of IE did the code not work for you in?

[snowlion]

I didn't test the code in IE, as I don't use it personally except for checking cross-browser compatibility issues.
Yes, and you didn't use it this time :D

I will ask though - which version of IE did the code not work for you in?
Internet Explorer 8 and 9 beta. :D

[JacquiiDesigns]

Yes, and you didn't use it this time :D


Internet Explorer 8 and 9 beta. :D

LOL - that would be correct.
Anyway - IDK of a fix for IE and I'm not going to search for one either.
If you find a way to make this bbcode compatible in IE - then by all means share the fix :)

[Boofo]

IDK of a fix for IE and I'm not going to search for one either.
If you find a way to make this bbcode compatible in IE - then by all means share the fix :)
You might want to re-think that position, Jacquii. There are a lot of IE8 users out there that would miss something this nice by not being able to use it. Just my 3.5 cents worth. ;)

[JacquiiDesigns]

You might want to re-think that position, Jacquii. There are a lot of IE8 users out there that would miss something this nice by not being able to use it. Just my 3.5 cents worth. ;)

I could re-think it yes - but it wouldn't do a bit of good, as I have no idea why IE is having issue parsing the code when it works just fine in all other browsers. I also advise my site users that Opera, Chrome, Firefox and Safari are excellent and preferred alternatives to IE. It's up to them whether they continue to use what I and a lot of other folks see as a subpar browser :P

But you can certainly feel free to sort the issue with IE - I'm sure we'll all appreciate it ;)

[Boofo]

I could re-think it yes - but it wouldn't do a bit of good, as I have no idea why IE is having issue parsing the code when it works just fine in all other browsers. I also advise my site users that Opera, Chrome, Firefox and Safari are excellent and preferred alternatives to IE. It's up to them whether they continue to use what I and a lot of other folks see as a subpar browser :P

But you can certainly feel free to sort the issue with IE - I'm sure we'll all appreciate it ;)

I completely agree with your feelings on IE, as I use Opera myself. But a lot of people out there do use IE so we are stuck with that until they wise up. ;)

I will see what I can find for a fix for the IE problem, if there is one to be found.

[JacquiiDesigns]

But a lot of people out there do use IE so we are stuck with that until they wise up. ;)

I will see what I can find for a fix for the IE problem, if there is one to be found.

I refuse to be stuck - seems the story of my life actually and where the bulk of my animosity springs from....

If you find a fix for the IE UGH though - I'm sure I will not be the only one appreciative of your efforts ;)

Jacquii.

[JacquiiDesigns]

This spoiler don't working after edit text in post
vb 3.8.7

yes it does = follow instructions to the letter and you should have no issues with it...except for the IE issue, which has been reported in previous post.

J.

[lowlight]

Is there a way to add the spoiler tags to the quick edit bar?

[BadaTurkiye]

does not work when we add more than one spoiler. spoiler turns on and off.

[Deimos]

does not work when we add more than one spoiler. spoiler turns on and off.

Yea I get the same on my forum.

[Hall of Famer]

Umm the spoiler tag works, but not the css. I am getting this from the forum...


https://vborg.vbsupport.ru/external/2012/03/1.jpg

[JacquiiDesigns]

Umm the spoiler tag works, but not the css. I am getting this from the forum...


https://vborg.vbsupport.ru/external/2012/03/1.jpg

Make sure you upload images to the correct folder.

[Hall of Famer]

I made sure the files are upload to the forum root directories, it just doest work.

[JacquiiDesigns]

Indeed it does work - what's your forum url and link to a test thread with spoiler?
I'd only tested with one spoiler, so apologies to those of you with multiple spoiler issues.

J.

[bigs15]

when i click preview it working fine.But after i post thread it shows like this
http://img19.imageshack.us/img19/7879/62750301.jpg (http://imageshack.us/photo/my-images/19/62750301.jpg/)

Uploaded with ImageShack.us (http://imageshack.us)

Thanku

[dizzynation]

how do we use the magic wand in the images folder?

[JacquiiDesigns]

how do we use the magic wand in the images folder?

I have absolutely no idea what you're talking about.

J.

[dizzynation]

/images/editor/spoiler.png

[dizzynation]

Are supposed to only get this text "Click Here To See Hidden Content?

[JacquiiDesigns]

/images/editor/spoiler.png
Input the following info in your BB Code Manager:
Button Image: images/editor/spoiler.png


Are supposed to only get this text "Click Here To See Hidden Content?
You should see the text - but also the background gradient image.

[egerr10]

hi guys. I have a problem with that spoiler. in the admin panel spoiler works fine
the preview is also doing well. but in a thread problem

I did not change the script code, only css. externally spoiler looks different if somebody needs my version below. I'm sorry for my bad english

http://worldofheroes.ru/threads/20-%D1%82%D0%B5%D1%81%D1%82?p=29#post29


h2.trigger {
background: #E9E9E6 url(/images/misc/icon_plus.gif) no-repeat 4px 50%;
font: 12px verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size: 12px;
padding: 3px 17px 3px 17px;
margin: 0 0 0 0px;
line-height: 15px;
font-weight: bold;
cursor: pointer;
background-position-x: 4px;
border: 1px solid #D6D6D6;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
h2.trigger a {
}
h2.trigger a:hover {
color: #48861E;
}

h2.active {
background: #E9E9E6 url(/images/misc/icon_minus.gif) no-repeat 4px 50%;
background-position-x: 4px;
border-bottom: none;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
}


.toggle_container {
margin: 0 0 5px;
padding: 0;
border: 1px solid #D6D6D6;
background: #F3F3F3;
overflow: hidden;
clear: both;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
}

.toggle_container .block {
padding: 10px 6px; /*--Padding of Container--*/
}