Show/Hide spoiler. HELP!

[Nacho!]

Hello people!

I'm not god at all at coding, so I need you computer and coding experts to please give me a hand 🙂

Do you know how can I put something under like a "Spoiler"?

For example, at my site (http://www.thefacebookforum.net/) I have added a button "Show Affiliates". When you click it, the mini banners show up. When you click on hide, they disappear.

I wasn't the one who did that, since a friend of mine helped me.

He used this code:

<center><script> function change_name(id){  var e = document.getElementById(id);    if(e.innerHTML == 'Show Affiliates')      e.innerHTML = 'Hide Affiliates';      else      e.innerHTML = 'Show Affiliates';  } function toggle_visibility(id){  var e = document.getElementById (id);    if(e.style.display == 'block')      e.style.display = 'none';      else      e.style.display = 'block';  } </script> <button onClick="change_name('swpbtn');toggle_visibility('affl')" id="swpbtn">Show Affiliates</button> <div id="affl" style="display:none;"><ul>HERE GOES THE CONTENT</ul></div></center>

The content I need to spoil is the following one

<script type="text/javascript" src="http://mycountdown.org/countdown.php?cp3_Hex=FFB200&cp2_Hex=FFFFFF&cp1_Hex=000080&ham=0&img=1&hbg=1&hfg=0&sid=0&fwdt=320&text1=Facebook Forum's Anniversary&text2=Happy Birthday FBF! &group=Special Day&countdown=Birthday&widget_number=3015&event_time=1269475200"></script></ul><ul><font size="2"><font color="Blue"><strong>Official Countdown to Facebook Forum's 1st Anniversary!</strong></font></font>

So, do you guys have any idea on how I can make this happen? Thank you so much, in advance, for all your help! :cheer:

 

[Dark Takua]

Did you want something like this?:

<center><script> function change_name(id){  var e = document.getElementById(id);    if(e.innerHTML == 'Show Banners')      e.innerHTML = 'Hide Banners';      else      e.innerHTML = 'Show Banners';  } function toggle_visibility(id){  var e = document.getElementById (id);    if(e.style.display == 'block')      e.style.display = 'none';      else      e.style.display = 'block';  } </script> <button onClick="change_name('swpbtn');toggle_visibility('affl')" id="swpbtn">Show Banners</button> <div id="affl" style="display:none;"><ul>    <script type="text/javascript" src="http://mycountdown.org/countdown.php?cp3_Hex=FFB200&cp2_Hex=FFFFFF&cp1_Hex=000080&ham=0&img=1&hbg=1&hfg=0&sid=0&fwdt=320&text1=Facebook Forum's Anniversary&text2=Happy Birthday FBF! &group=Special Day&countdown=Birthday&widget_number=3015&event_time=1269475200"></script></ul><ul><font size="2"><font color="Blue"><strong>Official Countdown to Facebook Forum's 1st Anniversary!</strong></font></font></ul></div></center>

 

[Nacho!]

Not working... and could it please say "Display Birthday Countdown" and "Hide Birthday Countdown"?

Thanks!

 

[Dark Takua]

Hmm...it works for me.

Here:

<center><script> function change_name(id){  var e = document.getElementById(id);    if(e.innerHTML == 'Display Birthday Countdown')      e.innerHTML = 'Hide Birthday Countdown';      else      e.innerHTML = 'Display Birthday Countdown';  } function toggle_visibility(id){  var e = document.getElementById (id);    if(e.style.display == 'block')      e.style.display = 'none';      else      e.style.display = 'block';  } </script> <button onClick="change_name('swpbtn');toggle_visibility('affl')" id="swpbtn">Display Birthday Countdown</button> <div id="affl" style="display:none;"><ul><script type="text/javascript" src="http://mycountdown.org/countdown.php?cp3_Hex=FFB200&cp2_Hex=FFFFFF&cp1_Hex=000080&ham=0&img=1&hbg=1&hfg=0&sid=0&fwdt=320&text1=Facebook Forum's Anniversary&text2=Happy Birthday FBF! &group=Special Day&countdown=Birthday&widget_number=3015&event_time=1269475200"></script></ul><ul><font size="2"><font color="Blue"><strong>Official Countdown to Facebook Forum's 1st Anniversary!</strong></font></font></ul></div></center>

 

[Nacho!]

I see what the problem is. If I click it, the Affiliates list show up but the counter doesn't. Maybe a glitch!

Anyways, another method to do this?

 

[Dark Takua]

Here's another kind of coding:

<html>
<head>
<title>show/hide div</title>
<script type="Text/JavaScript">
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";
}
}
</script>
<center><body>

<div id="spoiler" style="display:none;">

<button type="button" onclick="showDiv(0)";><font color="#000000" size="1"><b>Hide Birthday Countdown</b></font></button><br>
<script type="text/javascript" src="http://mycountdown.org/countdown.php?cp3_Hex=FFB200&cp2_Hex=FFFFFF&cp1_Hex=000080&ham=0&img=1&hbg=1&hfg=0&sid=0&fwdt=320&text1=Facebook Forum's Anniversary&text2=Happy Birthday FBF! &group=Special Day&countdown=Birthday&widget_number=3015&event_time=1269475200"></script></ul><ul><font size="2"><font color="Blue"><strong>Official Countdown to Facebook Forum's 1st Anniversary!</strong></font></font>
</div>
<div id="nospoiler" style="display:block;">

<button type="button" onclick="showDiv(1)";><font color="#000000" size="1"><b>Display Birthday Countdown</b></font></button><br></center>
</div></body></html>

 

[Nacho!]

My friend, you're a genius. Works perfectly!

I'll give you some FP cash as a reward. Thanks A LOT!!

 

[Dark Takua]

Thanks Nacho! I appreciate the cash 😀

 

[Nacho!]

NP! You deserve it!

BTW, do you know any site where I can upload a .css file? thanks a lot!

 

[Dark Takua]

http://www.mediafire.com/ I think.