mostrar un div oculto con una transicion

[roboty]

Estoy intentando mostrar un div oculto con una transicion en css3 pero no lo consigo se trata de pulsar un div y mostrar otro ejemplo:

Código CSS:

#boton{
background:url(boton.png) no-repeat; 
width:50px;
height:50px
}
#boton:active div[id^="oculto"]{
display:block;
}
#oculto{
display:none;
transition:all 1s linear;
width:200px;
height:200px;
background:green;
}
 

Código HTML:

<div id="boton"></boton>
<div id="oculto"></div>
 

alguien sabe que porque no funciona.

[PHPeros]

Te falta el parche para safari y chrome:

-webkit-transition:

[roboty]

Hola PHPeros no me funciona poniendo los parches, saludos.

[PHPeros]

Aquí hay una falla:

<div id="boton"></boton>
<div id="oculto"></div>

No se si te has dado cuenta pero no cierras con </div>...

Y supongo que esto tiene una parte de JavaScript que no has mostrado

[roboty]

Si tienes razon, esque lo copie a mano rapido, pero ese no era mi problema el error que me da es este:

TypeError: window[sAppNamespace].Vendor is undefined

por cierto la idea es mostrar el div oculto con css puro sin javascript.

[pzin]

Tienes que cambiar el selector. Con este:

Código CSS:

#boton:active div[id^="oculto"]
 

Seleccionas un elemento que está dentro de otro.

Y con este otro:

Código CSS:

#boton:active + div[id^="oculto"]
 

Seleccionas un hermano que le sigue.

Aunque para no caer en chuminadas mejor así:

Código CSS:

#boton:active + div#oculto
 

[roboty]

Hola pzin gracias era eso, como podria hacer para mantener el div visible solo con pulsar una vez
esto es posible o mejor hacerlo con javascript.
saludos

[pzin]

Posible es, pero es conveniente usar JavaScript para ello. En CSS lo podías hacer usando formularios, lo que sería romper la semántica HTML o haciendo uso de enlaces internos, lo que causaría un salto de página. Así que mejor con JavaScript.

[roboty]

Ya te refieres a usar un campo checkbox por ejemplo y mientras este checkeado se muestra el div te hare caso mejor hacerlo con javascript pero no tengo mucha idea de como se hace me podrias ayudar igual ya puse un post en javascript, saludos.