mostrar ocultar contenido css

zarakatajamember

VIP
Delta
Domainer
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
28 Nov 2013
Mensajes
614
Buenas, quisiera poder mostrar u ocultar varios contenidos dentro de una misma Url,
he probado con esta sentencia:
<label for="show">
<span>[Mostrar]</span>
</label>
<input type="radio" id="show" name="group">

<label for="hide">
<span>[Ocultar]</span>
</label>
<input type="radio" id="hide" name="group">

<div id="content">Contenido a mostrar</div>

y en el css:

#show,#hide {
display:none;
}

div#content {
display:none;
padding:10px;
background-color:#f6f6f6;
width:200px;
cursor:pointer;
}

input#show:checked ~ div#content {
display:block;
}

input#hide:checked ~ div#content {
display:none;
}

Funciona perfecto pero solo para un elemento. Si coloco varias veces el html porque deseo mostrar u ocultar varios div en la misma pagina, no funciona.
Cuando hago clic en mostrar, solo mostrara el primer elemente de toda la pagina y si pongo ocultar en cualquiera de los "botones" me oculta el primero.

Hay alguna forma de hacer esto funcional?
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba