[JavaScript] Making Spoilers.

[Spud]

What is a Spoiler?
A spoiler is like a box, but it has a button on the top. When you click on the button the box will open and you will see the content.

Why should I use a Spoiler?
When people view your post, they look foward to opening it and seeing what is inside. It also will make your post look fancy.

How do I use this Spoiler?
Copy the code and paste it where you want it. In the code, it has the word, "text". Change that to what text you want in it. Do it to the same as "Bold Title" and the "Title".

<html><head><title>TITLE</title>    <style type="text/css">body,input    {    font-family:"
Trebuchet ms",arial;font-size:0.9em;    color:#333;    }.spoiler    {    border:1px solid #ddd;    padding:3px;    }.spoiler .inner    {    border:1px solid #eee;    padding:3px;margin:3px;    }    
</style>    <script type="text/javascript">function showSpoiler(obj)    {    var inner = obj.parentNode.getElementsByTagName("div")[0];    if (inner.style.display == "none")        inner.style.display = "";    else        inner.style.display = "none";    }    </script></head><body><h1>BOLD TITLE</h1><div class="spoiler">    <input type=
"button" onclick="showSpoiler(this);" value="Show/Hide" />    <div class="inner" style="display:none;">TEXT</div></div></body></html>

Why should I keep looking back at Spud's posts?
Everyday he will be on, updating and replying to questions that you may want to know.

 

[xSilv3rbullet]

Re: Making Spoilers.

What is a Spoiler?
A spoiler is like a box, but it has a button on the top. When you click on the button the box will open and you will see the content.

Why should I use a Spoiler?
When people view your post, they look foward to opening it and seeing what is inside. It also will make your post look fancy.

How do I use this Spoiler?
Copy the code and paste it where you want it. In the code, it has the word, "text". Change that to what text you want in it. Do it to the same as "Bold Title" and the "Title".

<html><head><title>TITLE</title>    <style type="text/css">body,input    {    font-family:"
Trebuchet ms",arial;font-size:0.9em;    color:#333;    }.spoiler    {    border:1px solid #ddd;    padding:3px;    }.spoiler .inner    {    border:1px solid #eee;    padding:3px;margin:3px;    }    
</style>    <script type="text/javascript">function showSpoiler(obj)    {    var inner = obj.parentNode.getElementsByTagName("div")[0];    if (inner.style.display == "none")        inner.style.display = "";    else        inner.style.display = "none";    }    </script></head><body><h1>BOLD TITLE</h1><div class="spoiler">    <input type=
"button" onclick="showSpoiler(this);" value="Show/Hide" />    <div class="inner" style="display:none;">TEXT</div></div></body></html>

Why should I keep looking back at Spud's posts?
Everyday he will be on, updating and replying to questions that you may want to know.

Pretty much the same thing you'd do for hiding/expanding categories for forums and stuff.

 

[Spud]

Re: Making Spoilers.

Exactly.

 

[s-p-n]

Your code is unreadable.. Add line breaks and indentation, please. :S

Also, explain the code more. If you're going to teach or show somebody how to do something, be effective at telling them how. You didn't even mention JavaScript, and it's a tutorial about JavaScript:

How do I use this Spoiler?
Copy the code and paste it where you want it. In the code, it has the word, "text". Change that to what text you want in it. Do it to the same as "Bold Title" and the "Title".

Instead of telling us how to use your spoiler, teach us how we can make our own, by learning the JavaScript.

 

[holthelper]

What is a Spoiler?
A spoiler is like a box, but it has a button on the top. When you click on the button the box will open and you will see the content.

Why should I use a Spoiler?
When people view your post, they look foward to opening it and seeing what is inside. It also will make your post look fancy.

How do I use this Spoiler?
Copy the code and paste it where you want it. In the code, it has the word, "text". Change that to what text you want in it. Do it to the same as "Bold Title" and the "Title".

<html><head><title>TITLE</title>    <style type="text/css">body,input    {    font-family:"
Trebuchet ms",arial;font-size:0.9em;    color:#333;    }.spoiler    {    border:1px solid #ddd;    padding:3px;    }.spoiler .inner    {    border:1px solid #eee;    padding:3px;margin:3px;    }    
</style>    <script type="text/javascript">function showSpoiler(obj)    {    var inner = obj.parentNode.getElementsByTagName("div")[0];    if (inner.style.display == "none")        inner.style.display = "";    else        inner.style.display = "none";    }    </script></head><body><h1>BOLD TITLE</h1><div class="spoiler">    <input type=
"button" onclick="showSpoiler(this);" value="Show/Hide" />    <div class="inner" style="display:none;">TEXT</div></div></body></html>

Why should I keep looking back at Spud's posts?
Everyday he will be on, updating and replying to questions that you may want to know.

i love your last part "Why should I keep looking back at Spud's posts?"

function spoiler($text) {
    $repeat = "this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display";
    $output =
        "<div style=\"margin: 5px 20px 20px;\">" . 
        "    <div style=\"margin-bottom: 2px;\">" .
        "        <u>Spoiler</u>: <input type=\"button\" onclick=\"" . 
        "            if ({$repeat} != '') {" . 
        "                {$repeat} = ''; this.innerText = ''; this.value = 'Hide';" . 
        "            } else {" . 
        "                {$repeat} = 'none'; this.innerText = ''; this.value = 'Show';" . 
        "            }\" style=\"margin: 0px; padding: 0px; width: 45px; font-size: 10px;\" value=\"Show\" />" . 
        "    </div>" . 
        "    <div style=\"border: 1px inset ; margin: 0px; padding: 6px;\">" . 
        "        <div style=\"display: none;\">{$text}</div>" . 
        "    </div>" . 
        "</div>";
    return $output;
}

for php and i may look like a lot of lines but hey its easy to read.

 

[Technikawesome]

A more readable version. Replace the blah with anything you want.

	<div style="margin: 5px 20px 20px;">
		<div style="margin-bottom: 2px">
			<ins>Spoiler</ins>: <input type="button" value="Show" onclick="
				(function(input, content) {
					input.value = content.style.display == 'none' ? 'Hide' : 'Show';
					content.style.display = content.style.display == 'none' ? 'block' : 'none';
				})(this, this.parentNode.nextSibling.getElementsByTagName('div')[0])" />
		</div><div style="border: 1px inset; margin: 0px; padding: 6px">
			<div style="display: none">
				Blah
			</div>
		</div>
	</div>

 

[foxx]

i love your last part "Why should I keep looking back at Spud's posts?"

function spoiler($text) {
    $repeat = "this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display";
    $output =
        "<div style=\"margin: 5px 20px 20px;\">" . 
        "    <div style=\"margin-bottom: 2px;\">" .
        "        <u>Spoiler</u>: <input type=\"button\" onclick=\"" . 
        "            if ({$repeat} != '') {" . 
        "                {$repeat} = ''; this.innerText = ''; this.value = 'Hide';" . 
        "            } else {" . 
        "                {$repeat} = 'none'; this.innerText = ''; this.value = 'Show';" . 
        "            }\" style=\"margin: 0px; padding: 0px; width: 45px; font-size: 10px;\" value=\"Show\" />" . 
        "    </div>" . 
        "    <div style=\"border: 1px inset ; margin: 0px; padding: 6px;\">" . 
        "        <div style=\"display: none;\">{$text}</div>" . 
        "    </div>" . 
        "</div>";
    return $output;
}

for php and i may look like a lot of lines but hey its easy to read.

...what is this?

 

[Technikawesome]

...what is this?

A php function to wrap a text with a spoiler tag.

echo spoiler('text to put in spoiler.');

Note that the output generated by this code will be very unreadable because it sticked all the lines together.

Using multiline strings will make it easier to read.