1Unreal
05-08-2009, 10:00 PM
Ive not seen a very pretty spoiler BB code so I thought I would make one. It uses some really simple jQuery code so its very easy to modify with some other cool effects ;)
Heres a demo (http://www.theflickzone.com/tutorials/846-spoiler-bb-code.html#post1561)
Also, its worth mentioning that if you users browser is slow at parsing javascript they might see the spoiler for a split second.
Anyway, heres how to install it.
Open up the template headinclude, go to the bottom and add this code
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#spoilercontent").hide();
$("#spoilerhead").click(function () {
if ($("#spoilercontent").is(":hidden")) {
$("#spoilercontent").slideDown("slow");
} else {
$("#spoilercontent").slideUp("slow");
}
});
});
</script>
If you are using jQuery somewhere on your site already remove the first line ;)
Next add a new BB code use what ever options you want, but use this for the HTML replacement:
<div id="spoilerhead" class="thead">Spoiler</div> <div id="spoilercontent" class="alt1">{param}</div>
And youre done!
Heres a demo (http://www.theflickzone.com/tutorials/846-spoiler-bb-code.html#post1561)
Also, its worth mentioning that if you users browser is slow at parsing javascript they might see the spoiler for a split second.
Anyway, heres how to install it.
Open up the template headinclude, go to the bottom and add this code
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#spoilercontent").hide();
$("#spoilerhead").click(function () {
if ($("#spoilercontent").is(":hidden")) {
$("#spoilercontent").slideDown("slow");
} else {
$("#spoilercontent").slideUp("slow");
}
});
});
</script>
If you are using jQuery somewhere on your site already remove the first line ;)
Next add a new BB code use what ever options you want, but use this for the HTML replacement:
<div id="spoilerhead" class="thead">Spoiler</div> <div id="spoilercontent" class="alt1">{param}</div>
And youre done!