[BBCode] jQuery Spoiler

[all4phone]

Title: jQuery Spoiler
Description: Spoiler for long descriptions
Autor: liptonace [minor changes by FTH & all4phone]


BBCode usage:

Code: Select all

[spoiler]{TEXT}[/spoiler]

HTML replacement:

Code: Select all

<div style="margin:5px; margin-top:5px; border: 1px solid #3bbfe7;" class="codebox">
    <div style="height:22px; text-align: center;"><strong>PhpBB3BBCodes Spoiler:</strong>
    <input type="button" class="changevalue" value="{L_EXPAND_VIEW}" style="width:100px; font-size:10px; margin:0px; padding:0px;" onclick="$(this).parents('.codebox').find('.content').toggle('slow');"></div>
    <div class="content" style="display: none; background-color:#e6e6e6; padding: 5px;">{TEXT}</div></div>

Helpline:

Code: Select all

Spoiler for long descriptions: [spoiler]text[/spoiler]

Example:

Code: Select all

[spoiler]hidden text :) :D[/spoiler]

necessary edits:

Open: styles/your_style/template/overall_header.html
Find:

Code: Select all

</head>

Before add:

Code: Select all

    <script type="text/javascript">
    // <![CDATA[
    !window.jQuery && document.write('<script type="text\/javascript" src="http:\/\/code.jquery.com\/jquery-latest.min.js"><\/script>');
    // ]]>
    </script>
<script type="text/javascript">
$("document").ready(
	function()
	{
		$("input.changevalue").toggle(
			function()
			{
				$(this).val('{L_COLLAPSE_VIEW}');
			},
			function()
			{
				$(this).val('{L_EXPAND_VIEW}');
			}
		);
	}
);
</script>

NOTE: This spoiler uses the jQuery library. It is your responsibility to ensure adding this BBCode does not cause any conflicts with other jQuery related BBCodes/MODs on your board. jQuery should never be included on a page more than once.

Demo:
http://youtu.be/8mS1STsRBhM

[Blackwolf]

Screenshot please?

[FTH]

HTML Replacement :

Code: Select all

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$("document").ready(
   function()
   {
      $("input.changevalue").toggle(
         function()
         {
            $(this).val('{L_COLLAPSE_VIEW}');
         },
         function()
         {
            $(this).val('{L_EXPAND_VIEW}');
         }
      );
   }
);
</script>
<div style="margin:5px; margin-top:5px; border: 1px solid #3bbfe7;" class="codebox">
<div style="height:22px; text-align: center;"><strong>Spoiler:</strong>
<input type="button" class="changevalue" value="{L_EXPAND_VIEW}" style="width:85px; font-size:10px; margin:0px; padding:0px;" onclick="$(this).parents('.codebox').find('.content').toggle('slow');"></div>
<div class="content" style="display: none; background-color:#e6e6e6; padding: 5px;">{TEXT}</div></div>

it's not better just to do it ? With this code, not need to modify overall_header and language/en.common.php



Demo :
http://graphogames.fr/demo/viewtopic.php?p=1#p1

[doktornotor]

it's not better just to do it ? With this code, not need to modify overall_header and language/en.common.php

Letting people inject jQuery or $("document").ready() at any time via BBCode does not sound like the best idea around.

[FTH]

yeah exactly, i didn't think to that , thanks doktornotor for this suggest

[all4phone]

Screenshot please?

Demo added to first post.

$(this).val('{L_COLLAPSE_VIEW}');
},
function()
{
$(this).val('{L_EXPAND_VIEW}');

it's not better just to do it ? With this code, not need to modify [edited] language/en.common.php

very good idea, thanks for that, first post updated .

[Oyabun1]

I'd suggest replacing the line of code at the top of the add in for styles/your_style/template/overall_header.html

Code: Select all

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

with

Code: Select all

<script type="text/javascript">
// <![CDATA[ 
!window.jQuery && document.write('<script type="text\/javascript" src="http:\/\/code.jquery.com\/jquery-latest.min.js"><\/script>');
// ]]> 
</script>

That should then only load the jQuery library if it is not already loaded, thus minimising the chance of multiple inclusions.

It's not my code I just found it somewhere and it may be useful, especially because a number of MODs and BBCodes now use the jQuery library.

[all4phone]

First post updated.

@Oyabun1, this is a beautiful idea, tested, many thanks for that mate

[master412160]

Would it be somehow possible to add a cookie to store if the last click of a user was if the spoiler was HIDE or SHOW?

Then this would be really a neat spoiler to have.

[Jessica]

always wanted a jQuery spoiler *added*