Como se llama este efecto en los textos??

DjDance · #1 (**permalink**) 14/05/2012, 10:14

Hola muchachos !!

Quiera saber como se llama el efecto de mostrar y ocultar textos
como se muestra en esta página...

http://www.comparaonline.com/ayuda/automotriz

Fijense que al clickear una pregunta se abre la respuesta ...

Please ... es que no tendo idea de como buscarlo !! xD

Saludos !!

IsaBelM · #2 (**permalink**) 14/05/2012, 13:49

bueno, no hay efecto alguno. es simplemente mostrar y ocultar bloques. en este caso lo hace con javascript.

Cita:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
</style>
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function ver(val) {
objhl = document.getElementById(val);
obj = document.getElementById(val + '_opcion');

obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';

if ((visto_subm != null) && (visto_color != null)) {
visto_subm.className = 'ocultar';
visto_color.className = 'nosel';
}
visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}
</script>
</head>
<body>
<div id="menu1" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU0</div>
<div id="menu1_opcion" class="ocultar" style="z-index:1;">
SubMenu0<br />
SubMenu0<br />
SubMenu0
</div>

<div id="menu2" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU1</div>
<div id="menu2_opcion" class="ocultar" style="z-index:1;">
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>

<div id="menu3" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU2</div>
<div id="menu3_opcion" class="ocultar" style="z-index:1;">
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>

<div id="menu4" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU3</div>
<div id="menu4_opcion" class="ocultar" style="z-index:1;">
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
</body>
</html>

DjDance · #3 (**permalink**) 14/05/2012, 14:06

Genial !!

Pero como se hace para que el cursor muestre la manito y no el de texto??

Naahuel · #4 (**permalink**) 14/05/2012, 14:26

Con CSS.

Código CSS:

Ver original.nosel{
cursor:pointer;
}

IsaBelM · #5 (**permalink**) 14/05/2012, 16:04

como te indican es añadir la propiedad cursor.

también es factible hacerlo únicamente con css en lugar de javascript. siempre y cuando no te importe que no sea compatible con navegadores antiguos, por la pseudo clase que hay que usar

DjDance · #6 (**permalink**) 14/05/2012, 19:53

Genial !! Muchas gracias a ambos !!

@Isa

Si no fuera mucha la molestia lo podrías publicar en css please ??
Algo similar a lo que esta en el ejemplo del link que puse !!

Un abrazo !!

IsaBelM · #7 (**permalink**) 15/05/2012, 07:03

este código esta montado usando radio, también tienes la posibilidad de usar checkbox. en ambos caso no obtendrás exactamente el mismo resultado que con javascript.

si usas radio, una vez que selecciones una opción, siempre tendrá que haber una abierta
si usas checkbox, se puede cerrar la opción seleccionada, pero permite que hay mas de una opción abierta

lo mejor es que lo pruebas y lo veas por ti mismo

Cita:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
#opciones .control {
width: 0;
height: 0;
overflow: hidden;
position: absolute;
}

#opciones .control + div > label {
display: inline-block;
}

#opciones .control + div > div{
display: none;
}

#opciones .control:checked + div > label + div{
display: block;
}

#opciones .control:checked + div > label{
color: red;
}
</style>
</head<
<body>

<div id="opciones">

<input type="radio" name="c" id="opt1" class="control" />
<div>
<label for="opt1">MENU 1</label>
<div>
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>
</div>

<input type="radio" name="c" id="opt2" class="control" />
<div>
<label for="opt2">MENU 2</label>
<div>
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>
</div>

<input type="radio" name="c" id="opt3" class="control" />
<div>
<label for="opt3">MENU 3</label>
<div>
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
</div>

<input type="radio" name="c" id="opt4" class="control" />
<div>
<label for="opt4">MENU 4</label>
<div>
SubMenu4<br />
SubMenu4<br />
SubMenu4
</div>
</div>

</div>
</body>
</html>

DjDance · #8 (**permalink**) 15/05/2012, 08:14

Te pasaste Isa !! Muchas gracias por todo tu tiempo !!

Creo que me gusta más la opción con JavaScript, aunque hay algo que me gustaría cambiar y no sé si se pueda ...

Resulta que el div del botón o link que despliega el texto oculto ocupa toda la página.
Osea, si yo hago click fuera del texto igual se despliega el texto oculto.

Si no tiene solución no importa .. con todo lo que me has ayudado ya es suficiente !!

Un abrazo querida !!

IsaBelM · #9 (**permalink**) 15/05/2012, 13:48

añade la propiedad width a cada selector

Carmelo9 · #10 (**permalink**) 16/05/2012, 09:44

para el cursor poner la manito es
.nose{
cursor:hand;
}

sancas19 · #11 (**permalink**) 16/05/2012, 10:20

mejor usa jquery :)