[BB Code] Sliding Spoiler with jQuery
Mod Version: 1.00, by bpr
| vB Version: 4.0.x | Rating:  (0 vote - 0 average) |
Installs: 9 |
| Released: 24 Apr 2010 | Last Update: Never | Downloads: 0 |
 Not Supported
 Template Edits
Additional Files
Re-usable Code
|
||
What does this mod do?
This is a normal spoiler, with which you can hide some text in your post. When a user clicks on the spoiler name, a field will slide in/out with the hidden text.
Where is it useful?
This could be useful for serveral things, of couse it is not as mighty as a real hide hack, but you could hide small / unimportant information such as an answer for an rethoric question or you could hide some offtopic spam in a context post.
How does it looks?
Closed spoiler:
Open Spoiler:
How to install?
1. Upload the picture
into the following directory via ftp:
[forum_root]/images/icons/
2. Upload the Editor Icon via ftp:
into
[forum_root]/images/editor/
Uploads are finished now!
3. Create a new BBCode via ACP with the following settings:
Title: Spoiler
BB-Code Tag: sp
Code:
!IMPORTANT:You might wanna change "Spoiler Inhalt:" into your own language, but basically it means: "Spoiler Content:"(Dont worry you dont have to be a HTML crack to do so)
Example: [sp]Hidden text![/sp]
Description: This code hides/show a text within the spoiler tag
{option} usage: NO!
Image: /images/icons/spoiler.gif
You can check the rest however you like, but I was using:
Remove Tag: Yes
and the rest: No
Now you can save.
3. jQuery Part:
If you are already using jquery on your website you can easily skip part3 and go on to part4.
However, if you dont have jquery implented you can do this just like that:
Open your ACP -> Styles & Templates -> "Configure Styles" -> choose "Alter Templates" -> click on the template "footer" and than "edit"
Scroll down to the very last code line where something should be written like this:
and put underneath
now you can save this template and leave it.
4. Your Spoiler hack should already work!
On the other hand it looks pretty "blank" So lets do some quick n dirty CSS (3):
In my case I created an extra external stylesheet for my board, in many cases thats not the case, I am actually not that deep into vbulletin yet with all the style vars and so on but what we need is this little css:
You could also add this in one of the header templates such as "headinclude_bottom" where as you have to put around the code the following lines:
Above:
Under:
I personally do not recommend internal style sheets, so I am sorry to mess this little howto up with that bullcrap and not using style vars, I might alter this text in the future.
5. Thats it - you are done
All the best
bpr
This is a normal spoiler, with which you can hide some text in your post. When a user clicks on the spoiler name, a field will slide in/out with the hidden text.
Where is it useful?
This could be useful for serveral things, of couse it is not as mighty as a real hide hack, but you could hide small / unimportant information such as an answer for an rethoric question or you could hide some offtopic spam in a context post.
How does it looks?
Closed spoiler:
Open Spoiler:
How to install?
1. Upload the picture
into the following directory via ftp:
[forum_root]/images/icons/
2. Upload the Editor Icon via ftp:
into
[forum_root]/images/editor/
Uploads are finished now!
3. Create a new BBCode via ACP with the following settings:
Title: Spoiler
BB-Code Tag: sp
Code:
Code:
<div class="spoilerBB">
<h4 onclick="$('.spoilerHidden').slideToggle();">Spoiler Inhalt:</h4>
<div class="spoilerHidden" style="display:none;">
{param}
</div>
</div>
Example: [sp]Hidden text![/sp]
Description: This code hides/show a text within the spoiler tag
{option} usage: NO!
Image: /images/icons/spoiler.gif
You can check the rest however you like, but I was using:
Remove Tag: Yes
and the rest: No
Now you can save.
3. jQuery Part:
If you are already using jquery on your website you can easily skip part3 and go on to part4.
However, if you dont have jquery implented you can do this just like that:
Open your ACP -> Styles & Templates -> "Configure Styles" -> choose "Alter Templates" -> click on the template "footer" and than "edit"
Scroll down to the very last code line where something should be written like this:
Code:
{vb:raw ad_location.ad_footer_end}
</div>
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
4. Your Spoiler hack should already work!
On the other hand it looks pretty "blank" So lets do some quick n dirty CSS (3):
In my case I created an extra external stylesheet for my board, in many cases thats not the case, I am actually not that deep into vbulletin yet with all the style vars and so on but what we need is this little css:
Code:
/*SPOILER*/
.spoilerBB{}
.spoilerBB h4
{
padding-left:3px;
font-style:italic;
font-size:13px;
}
.spoilerBB h4:before
{
content: url(/images/icons/exclamation--frame.png);
padding-right:5px;
}
.spoilerHidden
{
background-color:#f2f6f8;
border:1px solid lightblue;
color:#303030;
font-style:italic;
padding:5px;
}
Above:
Code:
<style type="text/css">
Code:
</style>
5. Thats it - you are done
All the best
bpr
Download
No files for download.
Screenshots