Toggle

Omega100 · #1

Bueno, esto es mas HTML que Phpbb3 pero dado que es una cosa sensilla, no creo que os cause muchos problemas el caso es el siguiente, tengo esto:

Spoiler

---- Java:

Código: Seleccionar todo

Javascript
function switch1(div)
{
if (document.getElementById('one'))
{
var option=['one','two','three'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
//

---- HTML:

Código: Seleccionar todo

<h1>Javascript - switch and toggle</h1>
<p>Please note: these scripts are old and obtrusive. <a href="br.php?page=togglit">Unobtrusive javascript</a> is better.</p>
<div id="buttons">
<div id="switch1">
<h2>Switch 1</h2>
<input type="button" value="one" onclick="switch1('one')" />
<input type="button" value="two" onclick="switch1('two')" />
<input type="button" value="three" onclick="switch1('three')" />
<div id="one">
<p>Oh my God!</p>
</div>
<div id="two">
<p>I can't believe they voted for that fool!</p>
</div>
<div id="three">
<p>We're doomed!</p>
</div>
</div>
</div>

---- CSS:

Código: Seleccionar todo

.visible {display:block;}
.hidden {display:none;}
#buttons {height:300px;}
#buttons div {text-align:center;}
#wine1, #beer1, #whisky1, #two, #three {display:none;}
#switch1, #switch2 {width:48%;}
#switch1 {float:left;}
#switch2 {float:right;}

Eso funciona muy bien, y quiero hacer eso mismo, pero con mas opciones y tal, y modifique y tengo esto:

Spoiler

---- HTML:

Código: Seleccionar todo

			<script type="text/javascript">
function switch1(div)
{
if (document.getElementById('1'))
{
var option=['1','2','3'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
			</script>
			

<div id="buttons">
<div id="switch1">
<div id="1">
<p>Video 1</p>
</div>
<div id="2">
<p>Video 2</p>
</div>
<div id="3">
<p>Video 3</p>
</div>
<h2>Ver Online</h2>
<input type="button" value="1" onclick="switch1('1')" />
<input type="button" value="2" onclick="switch1('2')" />
<input type="button" value="3" onclick="switch1('3')" />

</div>

</div>

---- CSS:

Código: Seleccionar todo

.visible {display:block;}
.hidden {display:none;}
#buttons {height:300px;}
#buttons div {text-align:center;}
#1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12, #13, #14, #15, #16, #17, #18, #19, #20, #21, #22, #23, #24, #25, #26, #27, #28, #29, #30, #31, #32, #33, #34, #35, #36, #37, #38, #39, #40, #41, #42, #43, #44, #45, #46, #47, #48, #49, #50, #51, #52, #53, #54, #55, #56, #57, #58, #59, #60, #61, #62, #63, #64, #65, #66, #67, #68, #69, #70, #71, #72, #73, #74, #75, #76, #77, #78, #79, #80, #81, #82, #83, #84, #85, #86, #87, #88, #89, #90, #91, #92, #93, #94, #95, #96, #997, #98, #99, #100 {display:none;}
#switch1, #switch2 {width:48%;}
#switch1 {float:left;}
#switch2 {float:right;}

y el resultado es este: http://www.animeien.com/index.php?section=11

No se por que al principio aparecen todas las opciones y ya cuando pulsas el primer botón ya se ocultan todas y solo muestra la que seleccionas, pero en primer lugar muestra todas, yo no quiero que eso ocurra, donde me he confundido? :S:S

Gracias de antemanos.