ocultar y mostrar DIV

famjaes · #1 (**permalink**) 28/03/2015, 15:57

Hola alguien me puede ayudar con este ejemplo, como lograr el efecto expandir explicación que biene en este sitio

http://ksesocss.blogspot.com/2013/02/expandir-contraer-informacion-Css.html

me interesa por que sesupone solo es CSS y aunque refresque la pagina esta se mantiene y es lo que necesito

AngelKrak · #2 (**permalink**) 28/03/2015, 16:45

o.O exactamente que es lo que quieres? ya que ahi trai el codigo para que puedas hacer ese efecto ._.

famjaes · #3 (**permalink**) 28/03/2015, 17:09

Hoa buen día gracias por responder, solo quiero lograr el efecto que esta en esa pagina el cual es al dar clic en botón expandir explicación se despliega un cuadro, y si yo refresco la pagina dado que ahora el url apunta a expandir-contraer-informacion-Css.html#more este se mantiene fijo, osea no le afecta que se refresque la pagina al efecto

AngelKrak · #4 (**permalink**) 28/03/2015, 18:19

amigo pues ahi te da el codigo completo >_< solo colocalo en tu pagina y listo ;)

famjaes · #5 (**permalink**) 28/03/2015, 18:44

ya lo hice, pero no me funciona
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
.desplegable,
a[name='more']:target ~ .ver_mas {
visibility: hidden;
width:0;
height:0;
}

a[name='more']:target ~ .desplegable {
visibility: visible;
width: auto;
height: auto;

}
#apDiv1 {
position: absolute;
width: 500px;
height: 115px;
z-index: 1;
background:#000;
}
</style>
</head>

<body>

<a class="ver" href="#more">Ver</a>
<div class="extender">
<a href="#more:after">Cerrar</a>
Contenido oculto y mostrado a voluntad del usuario

<a href="#more:after">Cerrar</a>
Para poder plegarlo sin tener que subir
</div>
<div id="apDiv1"></div>

</body>

</html>

k podra estar mal?

AngelKrak · #6 (**permalink**) 28/03/2015, 20:50

mas facil usa este codigo amigo ;)

Código HTML:

Ver original<a href="#spoiler-open-1" id="spoiler-open-1" class="trigger open">Open</a>
<a href="#spoiler-close-1" id="spoiler-close-1" class="trigger close">Close</a>
<div class="spoiler">
    Ololo, Imma spoiler    
</div>

Código CSS:

Ver original.spoiler {
    display: none;
}
 
.trigger.close {
    display: none;
}
 
.trigger.open:target {
    display: none;
}
 
.trigger.open:target + .trigger.close {
    display: inline;
}
 
.trigger.open:target + .trigger.close + .spoiler {    
    display: block;
}

o tambien este mediante Checkbox >_<

Código HTML:

Ver original<input type="checkbox" class="trigger" />Mostar
<div class="spoiler">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

Código CSS:

Ver originalbody {
  background-color:#ccc;
  padding:30px;
}
 
input.trigger {
  display:inline-block;
  margin:0px;
  padding:0px;
}
 
.spoiler {
  background-color:white;
  padding:15px 30px;
  margin:10px 0px 0px;
  display:none;
}
 
input.trigger:checked + .spoiler {
  display:block;
}

ZoroRoronoa · #7 (**permalink**) 28/03/2015, 22:41

Solo como dato extra:
El selector :target, en IE, es soportado a partir de la v.9.
Cosa que no creo que deba espantar a nadie