Foros del Web » Creando para Internet » CSS »

Mostrar / ocultar div

Estas en el tema de Mostrar / ocultar div en el foro de CSS en Foros del Web. Hola chicos tengo la siguiente duda: He seguido este manual [URL="http://webstandard.kulando.de/post/2010/03/05/css3-transition-tutorial-menu-mit-slide-effekt-im-apple-style"]Tutorial[/URL] para mostrar y ocultar un parrafo de texto, ahora bien mi caso concreto es ...
  #1 (permalink)  
Antiguo 30/08/2011, 01:26
 
Fecha de Ingreso: febrero-2010
Mensajes: 15
Antigüedad: 14 años, 2 meses
Puntos: 0
Mostrar / ocultar div

Hola chicos tengo la siguiente duda:

He seguido este manual [URL="http://webstandard.kulando.de/post/2010/03/05/css3-transition-tutorial-menu-mit-slide-effekt-im-apple-style"]Tutorial[/URL] para mostrar y ocultar un parrafo de texto, ahora bien mi caso concreto es que junto al parrafo en la parte izquierda adjunto una imagen y todo ello lo meto dentro de un div.

[URL="http://imageshack.us/photo/my-images/109/mesplegable.jpg/"]Imagen[/URL]

Quería saber como puedo aplicar el mismo efecto pero al div, me explico, los tengo todos ocultos con hidden pero no se como hacer para que se muestren a la hora de hacer clic en los títulos ya que el :target se puede aplicar al atributo "p" del parrafo pero no se como hacerlo al div.

Lo he intentado de mil formas y no me sale.

Muy importante no quiero utilizar JavaScript para realizar este efecto solo quiero utilizar HTML + CSS.

Edito para adjuntaros una imagen que represente lo que tengo en estos momentos sin aplicar el hidden.

Supongo que el efecto se aplica tanto con el overflow como con ese trozo de CSS3 pero es que estoy un poco pez en este tipo de efectos.

Gracias chicos.

Última edición por Cambotero; 30/08/2011 a las 01:35
  #2 (permalink)  
Antiguo 30/08/2011, 01:46
Avatar de morfasto  
Fecha de Ingreso: julio-2011
Ubicación: Lima
Mensajes: 291
Antigüedad: 12 años, 9 meses
Puntos: 8
Respuesta: Mostrar / ocultar div

Eso lo puedes hacer posible con JQuery. Busca las funciones .show() y .hide() y vas a poder hacerlo.

Aqui te dejo un ejemplo que encontre en google: [URL="http://papermashup.com/demos/jquery-sliding-div/"]EJEMPLO[/URL]

Saludos
  #3 (permalink)  
Antiguo 30/08/2011, 01:59
 
Fecha de Ingreso: febrero-2010
Mensajes: 15
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Mostrar / ocultar div

Gracias compañero, lo que pasa que quería intentar hacer todo lo que se puede hacer con JQuery y JS con HTML + CSS para intentar abusar lo menos posible de JS.

He seguido trasteando hasta que lo he conseguido, a continuación explico la solución que he tomado por si algún otro compañero se encuentra con la misma duda:

1.- Tomo un div que recubra tanto el título, como el contenido de esa sección. En un principio le doy una altura de 50px para que solo se vea el título y no el contenido.

2.- Con el atributo :target aplicado al div (que veo que si se puede aplicar) le aplico una altura de 170px. Entonces cuando se hace clic en cada uno de los títulos se consigue el perseguido efecto de mostrar el contenido de cada uno de las secciones.

De nuevo gracias morfasto por la contestación.

Saludos chicos

Etiquetas: html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:01.