Show/hide button

Description

With this tutorial you will have a button to show/hide the message (like a spoiler for all the pages)

Set up

First, add this code in your javascript codes and put it in all pages

Code:

function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}

Then use this html codes to put text and marker

This will show you the button to click to show/hide

Code:

<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

And this code will contain the message!

Code:

[b]Note: Paste this two latest codes in the same place[/b]

Code:

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

Customize the tutorial

You can change text style and the messages

Demostration

Here you are a demo of this: http://codes.forumotion.co.uk/h7-hide-show

Technical problems

The tutorial was tested on this forum and with the browser Google Chrome; If you notice that the tutorial doesn't work for a browser or for a version of forum (PhpBB2, PhpBB3, PunBB, Invision) contact an administrator and we will fill this field with your reporting. Thanks, the staff

For every problem or question please, contact us in the section Support for the tutorials, The staff will answer you as soon as it is possible...

Friendly,
The team of the Forum of Codes.