Mostrar y ocultar múltiples contenidos con CSS en una misma URL

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😛ointer;
}

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?

veamos, para que sea valido, es un id por objeto... puedes usar class, ese se peude repetir... con jquery es mas facil...
o usar

Puede que sea esto lo que buscas: https://codepen.io/oloman/pen/odnqy

Excelente! eso es lo que queria.

LuisPariona dijo:

Puede que sea esto lo que buscas: https://codepen.io/oloman/pen/odnqy

Hacer clic para expandir...