<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>
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".
Code:<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.
Instead of telling us how to use your spoiler, teach us how we can make our own, by learning the JavaScript.Spud said: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".
i love your last part "Why should I keep looking back at Spud's posts?"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".
Why should I keep looking back at Spud's posts?Code:<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>
Everyday he will be on, updating and replying to questions that you may want to know.
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;
}
<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>
...what is this?i love your last part "Why should I keep looking back at Spud's posts?"
for php and i may look like a lot of lines but hey its easy to read.PHP: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; }
...what is this?
echo spoiler('text to put in spoiler.');