Condicional para poner y sacar botones

[Rolomo]

Quiero hacer una tabla donde hayan unos botones que esten condicionados por otros.
Ejemplo:

Tengo un par de botones:

<input type="button" id="boton" class="pepito" value="Uno" onclick="animation('1')" />

<input type="button" id="boton" class="pepito" value="Dos" onclick="animation('2')" />

Y luego tengo dos tablas con botones. Entonces, lo que quiero es qe dependiendo si haces click en "Uno" o en "Dos" aparezca una lista de botones o otra. Esa lista de botones ocupan el mismo lugar, pero claro nunca podrán convivir porque estaran condicionados por "Uno" o a "Dos".

Tabla de botones :

Si pulso "Uno" deben aparecer estos:

<input type="button" value="Hola" onclick="animation('Hola')" />

<input type="button" value="Adios" onclick="animation('Adios')" />

<input type="button" value="Pa" onclick="animation('Pa')" />

<input type="button" value="Ma" onclick="animation('Ma')" />

Si pulso "Dos" deben aparecer estos:

<input type="button" value="Hello" onclick="animation('Hello')" />

<input type="button" value="Bye" onclick="animation('Bye')" />

Si solo fuera cambiar el value sería fácil, pero también cambia la función.

Muchas Gracias.

[Reedyseth]

Oculta una en base a su selección, pero lo que estoy viendo es que a los botones que vas usar para controlar eso no les esta poniendo ID's correctos, osea, los esta repitiendo, y un ID es único en el DOM.

Otra cosa mas que estoy viendo es que no les das nombre a los inputs con el atribunto 'name'.

[Rolomo]

Sí, tienes toda la razón. me he inventado unos ejemplos mal hechos jeje
Cómo hago eso de ocultar una en base a su selección?

[Reedyseth]

Puedes usar jQuery para manipular el DOM o Javascript puro, ya te muestro unos ejemplos.

[Reedyseth]

No se que tan bueno sea pegar código de jsfiddle aquí pero aquí te pongo un ejemplo de como ocultar los grupos, para cada grupo le pongo un div y este es el código que uso:

Código Javascript:

function ocultaDiv1() {    
    document.getElementById("panel1").style.display = "none";   
}
 
function ocultaDiv2() {    
    document.getElementById("panel2").style.display = "none";   
}
 

Código HTML:

<button id="btn1" onclick="ocultaDiv1()">Boton 1</button>
<button id="btn2" onclick="ocultaDiv2()">Boton 2</button>
 
<div id="panel1" class="panel1">
    <input type="button" value="Hola" onclick="animation('Hola')" />
 
    <input type="button" value="Adios" onclick="animation('Adios')" />
 
    <input type="button" value="Pa" onclick="animation('Pa')" />
 
    <input type="button" value="Ma" onclick="animation('Ma')" />
</div>
 
<div id="panel2" class="panel2">
    <input type="button" value="Hola" onclick="animation('Hola')" />
 
    <input type="button" value="Adios" onclick="animation('Adios')" />
 
    <input type="button" value="Pa" onclick="animation('Pa')" />
 
    <input type="button" value="Ma" onclick="animation('Ma')" />
</div>
 

Código CSS:

.panel1 {
background-color: grey;
height: 50px;
padding: 10px;    
}
.panel2 {
background-color: green;
height: 50px;
padding: 10px;    
}
​
 

y aquí tengo el ejemplo en vivo: http://jsfiddle.net/X9Nnu/21/

[Rolomo]

Perfecto, es lo que exactamente queria. ;)

Muchas gracias.

[Reedyseth]

Recuerda que este código es algo muy génerico, puedes hacer algo mas elaborado para que puedas manejarlo mejor, por que ahí solo escondes el div con el valor 'none' del atributo 'display'.

Ya te queda de trabajo implementar para que sea visible con otro botón. :)