/    Sign up×
Community /Pin to ProfileBookmark

Spoiler Code Help….

Copy linkTweet thisAlerts:
Aug 01.2007

I am jut learning Javascript, and am finding it quite annoying.

I managed to make this:

[code]<small> <b>Spoiler:</b></small><br /> <div style=”border: inset 1px gray; padding: 1px;”><div><button type=”button” class=”button” onclick=”this.parentNode.parentNode.childNodes[1].style.display = ”; this.parentNode.style.display = ‘none’;” title=”Click to show the spoiler.”><font color=”#000000″ size=”1″><b>Show Spoiler</b></font></button></div><div id=”spoiler” style=”display: none;”> <br />[/code]

Which is a simple spoiler tag. As you can see it is very messy code……

Well, would someone please be able to make it so that the button stays visible when you click the spoiler? And when you click it again, the spoiler hides.

Here is an example of it at my test forum:
[url]http://doghousegifts.net/Upload/showthread.php?tid=2&pid=2#pid2[/url]

Thank you,

BP

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@BrainDonorAug 01.2007 — There's likely a cleaner way to do this, but I think this should work just fine. I only tested in IE6 as that's all I have here at work.


edited to use Dok's suggestion. ?


<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;show/hide div&lt;/title&gt;
&lt;script type="Text/JavaScript"&gt;
var x;
function showDiv(x) {
if (x==1) {
spoiler.style.display = "block";
nospoiler.style.display = "none";
}else{
spoiler.style.display = "none";
nospoiler.style.display = "block";
}
}
&lt;/script&gt;
&lt;body&gt;

&lt;div id="spoiler" style="display:none;"&gt;
This is the spoiler text.&lt;br /&gt;
&lt;button type="button" onclick="showDiv(0)";&gt;&lt;font color="#000000" size="1"&gt;&lt;b&gt;Hide Spoiler&lt;/b&gt;&lt;/font&gt;&lt;/button&gt;

&lt;/div&gt;
&lt;div id="nospoiler" style="display:block;"&gt;
Click button to see the spoiler.&lt;br /&gt;
&lt;button type="button" onclick="showDiv(1)";&gt;&lt;font color="#000000" size="1"&gt;&lt;b&gt;Show Spoiler&lt;/b&gt;&lt;/font&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@DokAug 01.2007 — Don't use style.visibility = 'hidden' | 'visible'

Use style.display = 'none' | 'inline' | 'block'
Copy linkTweet thisAlerts:
@BrainDonorAug 01.2007 — Don't use style.visibility = 'hidden' | 'visible'

Use style.display = 'none' | 'inline' | 'block'[/QUOTE]


*makes mental note*

Thanks, Dok. ?
Copy linkTweet thisAlerts:
@yukeeiFeb 26.2010 — Hey BrainDonor,

I tried your spoiler code and it works great -- so long as I don't try to use more than one spoiler on my page.

I was wonderng if there was a way to do so...
Copy linkTweet thisAlerts:
@midorivacaJan 24.2012 — Hey BrainDonor,

I tried your spoiler code and it works great -- so long as I don't try to use more than one spoiler on my page.

I was wonderng if there was a way to do so...[/QUOTE]

No one ever responded to this, and I'd like help with that too please! The code works perfectly, but when you repeat the code on the same page, the show button opens the first spoiler instead of the second.

I've scoured the web and can't find another spoiler code like this one that actually works, so I would love love love if this one could be tweaked to allow multiple spoilers on one page! ?
Copy linkTweet thisAlerts:
@camo64Jan 29.2012 — Hi I have been doing some browsing myself on finding a spoiler and i found a really good code that works and it seems infinite can be on a page.

I take no credit for this code, original code: http://forums.digitalpoint.com/showthread.php?t=768374

This is a complete webpage so just add the code where it belongs on the page.

[CODE]<html>
<head>
<title>Spoiler HTML code</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>Spoiler HTML w/Js Code by Skrap</h1>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Show/Hide" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Show/Hide" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
</body>
</html>[/CODE]

I hope this is what you are looking for.

Cheers

Cameron
Copy linkTweet thisAlerts:
@midorivacaFeb 03.2012 — Perfect! Thank you so much! ?
Copy linkTweet thisAlerts:
@midorivacaFeb 03.2012 — This is probably a ridiculously easy question... but do you know if there is a way to change the button option to an image of my choosing?

and then I'm done I promise XD
×

Success!

Help @bluearukia spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...