BB Code Enhancements - JQuery-animated Spoiler BBCode

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 - Here is a really nice spoiler bbcode that's animated with jquery. See a live example at BBCode Test: JPiC Forum For Writers

Directions are simple as sugar-free apple pie:

1. Upload both "spoiler" and "images" folders to your forum root directory
2. 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: [spoiler]See? This is hidden text![/spoiler]
  
  
• 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-...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/

[dizzynation]

/images/editor/spoiler.png

[dizzynation]

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

[JacquiiDesigns]

Originally Posted by dizzynation

/images/editor/spoiler.png

Input the following info in your BB Code Manager:

• Button Image: images/editor/spoiler.png

Originally Posted by dizzynation

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-%...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--*/
}