JQuery-animated Spoiler BBCode
Mod Version: 1.00, by JacquiiDesigns
| vB Version: 3.8.x | Rating:  (8 votes - 5.00 average) |
Installs: 43 |
| Released: 29 Dec 2010 | Last Update: Never | Downloads: 440 |
 Not Supported
 Additional Files
Re-usable Code
|
||
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 http://jacquiidesigns.com - Here is a really nice spoiler bbcode that's animated with jquery. See a live example at http://jpicforum.info/forum/recycle-bin/bbcode-test-6291.html#post35010
Directions are simple as sugar-free apple pie:
Input the following info in your BB Code Manager:
---------------
---------------
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/
Brought to you by http://jacquiidesigns.com - Here is a really nice spoiler bbcode that's animated with jquery. See a live example at 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: HTML Code:
<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-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/
Download
jquery_spoiler_bbcode.zip (171.4 KB, 659 downloads)
Screenshots
