BB Code Enhancements - inline & block [hide] bbcode

What this does: These BB Codes add tags to hide text inline and in a block. I've also made a BB Code that uses an option.

Positive:

• These tags allow to use hidden text inline and in blocks. Also, about anything can be used inside them (at least as far as I've tested).
• Both one of the single versions and the double version can be used together. i.e: [hide] for inline and [hide=inline] or [hide=block] for both.

Negative:

• After editing, the tags don't work. Refresh and they're there though. (weird :\)
• At the moment, it will always post the javascript function whenever a [hide] tag is used, which can make it pretty slow if big amounts of hide tags are used on one page. I'd be glad if someone could help me with stuffing this into a plugin/product or something, to prevent that from happening.

CSS

Go to Admincp > Styles & Templates > Style Manager > Main CSS

Now scroll all the way down to Additional CSS Definitions and add:

                /*******************************************\
                *        CSS for the [hide] BBcode!         *
                \*******************************************/

span.hidetitle_inline {
     background-color: #5C7099;
     color: #FFFFFF;
     font-weight: bold;
}
span.hidetext_inline {
     background-color: #E1E4F2;
     color: #000000;
}

div.hideborder_block {
     width: 100%;
     border-collapse: collapse;
     border: solid thin black;
     background-color: #5C7099;
     color: #FFFFFF;
     font-weight: bold;
}
div.hidetitle_block div{
     width: 100%;
     border-collapse: collapse;
     border: solid thin black; 
}
div.hidetext_block{
     background-color: #F5F5FF;
     color: #000000;
}

-----------------------------------------------------------------------------------

Then add the BB Code(s) at AdminCP > Custom BB Codes > Add New BB Code:

Hide BB Code
Title: hide
BB Code Tag Name: hide
Replacement:

<script language='JavaScript' type='text/javascript'><!--

  inline_title_hidden = '&nbsp;hidden ?&nbsp;';
  inline_title_shown = '&nbsp;?&nbsp;';
  inline_text_prefix = '';
  block_title_hidden = '&nbsp;Show content';
  block_title_shown = '&nbsp;Hide content';
  block_text_prefix  = '&nbsp;';

function hide(target,displaytype) {
    titleNode = target;
    textNode = target.nextSibling;
  if (displaytype == 'inline') {
    if (textNode.style.display != 'none') {
      textNode.style.display = 'none';
      titleNode.innerHTML = inline_title_hidden;
    } else {
      textNode.style.display = 'inline';
      titleNode.innerHTML = inline_title_shown;
    }
  } else {
    if (textNode.style.display != 'none') {
      textNode.style.display = 'none';
      titleNode.innerHTML = block_title_hidden; } 
    else {
      textNode.style.display = 'block';
      titleNode.innerHTML = block_title_shown;
    }
  }
}

if ('{option}' == 'inline') {
  var output = '<span><span class="hidetitle_inline" onclick="hide(this,\'inline\');">'+inline_title_hidden+'</span><span class="hidetext_inline" style="display: none;">'+inline_text_prefix;
  document.write(output);
} else {
  var output = '<div class="hideborder_block"><div class="hidetitle_block" onclick="hide(this,\'block\');">'+block_title_hidden+'</div><div class="hidetext_block" style="display: none;">'+block_text_prefix;
  document.write(output);
}
//--></script>
{param}
<script language='JavaScript' type='text/javascript'><!--

  inline_text_suffix = '';
  block_text_suffix  = '<br />';

if ('{option}' == 'inline') {
  var output = inline_text_suffix+'</span></span>';
} else {
  var output = block_text_suffix+'</div></div>';
}
document.write(output);
//--></script>

Example: This is [hide]an inline[/hide] example!
Description: This tag allows both inline and block hide to be used.
[hide=inline] = inline
[hide=block] = block
Use option: Yes
Remove Tags if empty: Yes


Inline BB Code only
Title: hide
BB Code Tag Name: hide
Replacement:

<script language='JavaScript' type='text/javascript'><!--

  inline_title_hidden = '&nbsp;hidden ?&nbsp;';
  inline_title_shown = '&nbsp;?&nbsp;';
  inline_text_prefix = '';

function hide(target,displaytype) {
    titleNode = target;
    textNode = target.nextSibling;
  if (displaytype == 'inline') {
    if (textNode.style.display != 'none') {
      textNode.style.display = 'none';
      titleNode.innerHTML = inline_title_hidden;
    } else {
      textNode.style.display = 'inline';
      titleNode.innerHTML = inline_title_shown;
    }
  } else {
    if (textNode.style.display != 'none') {
      textNode.style.display = 'none';
      titleNode.innerHTML = block_title_hidden; } 
    else {
      textNode.style.display = 'block';
      titleNode.innerHTML = block_title_shown;
    }
  }
}

var output = '<span><span class="hidetitle_inline" onclick="hide(this,\'inline\');">'+inline_title_hidden+'</span><span class="hidetext_inline" style="display: none;">'+inline_text_prefix;
document.write(output);
//--></script>
{param}
<script language='JavaScript' type='text/javascript'><!--

  inline_text_suffix = '';
  
var output = inline_text_suffix+'</span></span>';
document.write(output);
//--></script>

Example: This is [hide]a block[/hide] example!
Description: This tag allows to hide text in a block.
Use option: No
Remove Tags if empty: Yes

Block BB Code only
Title: hide
BB Code Tag Name: hide
Replacement:

<script language='JavaScript' type='text/javascript'><!--

  block_title_hidden = '&nbsp;Show content';
  block_title_shown = '&nbsp;Hide content';
  block_text_prefix = '&nbsp;';

function hide(target,displaytype) {
  titleNode = target;
  textNode = target.nextSibling;
  if (textNode.style.display != 'none') {
    textNode.style.display = 'none';
    titleNode.innerHTML = block_title_hidden; } 
  else {
    textNode.style.display = 'block';
    titleNode.innerHTML = block_title_shown;
  }
}

var output = '<div class="hideborder_block"><div class="hidetitle_block" onclick="hide(this,\'block\');">'+block_title_hidden+'</div><div class="hidetext_block" style="display: none;">'+block_text_prefix;
document.write(output);
//--></script>
{param}
<script language='JavaScript' type='text/javascript'><!--

  block_text_suffix  = '<br />';

var output = block_text_suffix+'</div></div>';
document.write(output);
//--></script>

Example: This is [hide]an inline[/hide] example!
Description: This tag allows to hide text in the middle of a sentence. The hidden text will show on click, and is hidden on another click.
Use option: No
Remove Tags if empty: Yes

-----------------------------------------------------------------------------------

Done! You should now be able to use them.

There are a few things you can configure (in addition to the obvious CSS ) in the Javascript directly:

At the top:
inline_title_hidden = Title of the inline region when the text is hidden.
inline_title_shown = Title of the inline region when the text is shown.
inline_text_prefix = Something that should come before the shown inline text.
block_title_hidden = Title of the block region when the text is hidden.
block_title_shown = Title of the inline region when the text is shown.
block_text_prefix = Something that should come before the shown block text.

At the bottom:

inline_text_suffix = Something that should come after the shown inline text.
block_text_suffix = Something that should come after the shown block text.

-----------------------------------------------------------------------------------
This is my first entry on VB.org, so I'm all open for fair comments.

I hope a few souls find this useful. If you do, please click install. =)

[Simon88]

Yay! first reply and thanks!

[troppodel]

i there
nice mod but please let me know can i disable the click for show text for usergroups like unregistered?
i wanna hide a text for the unregistered users and disable the click for see the text, but enable it for the registered users