Ocultar/mostrar elementos ¡Con imágenes!

Iosuiscloud · #1 (**permalink**) 31/03/2009, 11:53

La pregunta es la clásica de mostrar y ocultar elementos, que al pulsar un enlace, oculte un div, y al pulsar el mismo de nuevo, lo haga aparecer. Lo que me gustaría saber es como se puede hacer para que cambie la imagen según si la capa está visible o no, estilo al menú de esta página (nosetup.org), el de la izquierda. (No sé si es considerado spam o no)

Panino5001 · #2 (**permalink**) 31/03/2009, 13:23

Fijate si te sirve:

Código:

<!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=iso-8859-1" />
<title>test</title>
<script>
function toggle(el,im){
	el.style.display=el.style.display!='none'?'none':'block';
	im.src=el.style.display=='none'?'mas.gif':'menos.gif';
}
</script>
</head>

<body>
<div style="cursor:pointer" onclick="toggle(this.nextSibling,this.childNodes[0])"><img src="menos.gif" width="12" height="12" /> titulo</div><div>bla bla bla bla </div>
</body>
</html>

Iosuiscloud · #3 (**permalink**) 03/04/2009, 07:41

Voy a concretar un poco más.
Quiero eso mismo, pero que pueda escoger la capa a ocultar según el "id"

Panino5001 · #4 (**permalink**) 03/04/2009, 07:58

Es casi lo mismo:

Código PHP:

  <!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=iso-8859-1" />

<title>test</title>

<script>

function toggle(el,im){

    el.style.display=el.style.display!='none'?'none':'block';

    im.src=el.style.display=='none'?'mas.gif':'menos.gif';

}

</script>

</head>

 
<body>

<div style="cursor:pointer" onclick="toggle(document.getElementById('capaAOcultar'),this.childNodes[0])"><img src="menos.gif" width="12" height="12" /> titulo</div><div id="capaAOcultar">bla bla bla bla </div>

</body>

</html>

Iosuiscloud · #5 (**permalink**) 03/04/2009, 08:03

Mil gracias

, tan simple como eso, get element by id, como no tengo ni idea de javascript, pues no se me había ocurrido... Muchas gracias, en serio

Edu_Wonka · #6 (**permalink**) 30/08/2009, 12:22

como se hace para tenerlo de primeras oculto? porque a mi me sale mostrado de primeras, y quiero que sea al reves
asias de con antelacion :)

zerokilled · #7 (**permalink**) 30/08/2009, 12:37

con hojas de estilo aplicale display:none; al elemento en particular.

Edu_Wonka · #8 (**permalink**) 30/08/2009, 12:54

hecho, con esto:
<div style="display:none"> bla bla bla </div>

y ya no sale, pues muchas gracias

ups, lo malo que despues de poner eso ya no me sale lo de abajo no solo lo oculto, sino nada del resto de la pagina de ahí para abajo

edito: ya lo he resuelto, la solucion, meterlo todo en un <ul>