Contenido Desplegable

konoyek · #1 (**permalink**) 11/07/2009, 12:05

Lo que busco es un codigo el cual al momento que le den click a un vinculo automaticamente me despliegue la informacion ejemplo:

Nacional: (cuando le den click me despliegue el contenido)

contenido:

bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla

Adler · #2 (**permalink**) 11/07/2009, 12:33

Hola

Algo como esto

Código javascript:

Ver originalvar obj = document.getElementById("id_DIV");
    
        if (obj.style.display == "none")  obj.style.display= "none";
                else obj.style.display= "none";

Código html:

Ver original<a href="javascript:void(0)" onclick="funcion();">Mostrar Contenido</a>
<div id="id">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
    Responder Citando
</div>

Suerte

konoyek · #3 (**permalink**) 11/07/2009, 12:45

Gracias por tu respuesta pero en este momento me salen las siguientes dudas:

el script tiene que ir en el head y es un type="text/javascript"> verdad??

Adler · #4 (**permalink**) 11/07/2009, 13:05

Hola

Sí entre <script type="text/javascript">...</script>

Suerte

konoyek · #5 (**permalink**) 11/07/2009, 14:30

mira en realidad coloque el codigo de la siguiente manera:

Código HTML:

<!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&iacute;tulo</title>


<script type="text/javascript">
var obj = document.getElementById("id_DIV");
    
        if (obj.style.display == "none")  obj.style.display= "none";
                else obj.style.display= "none";
				</script>
                
</head>

<body>

<a href="javascript:void(0)" onclick="funcion();">Mostrar Contenido</a>
<div id="id">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
    Responder Citando
</div>


</body>
</html>

pero igual no me da ningun funcionamiento el cual busco

zerokilled · #6 (**permalink**) 11/07/2009, 14:50

estoy seguro que la intencion de Adler fue darte una pista del codigo principal y luego tu lo ajustas a tus necesidades pero parece que no tienes mucha idea de javascript. el codigo esta supuesto a ser una funcion de modo que tienes que declarar una funcion y en el cuerpo pones el codigo.

Código:

function nombre_funcion(){
// codigo aqui;
}

luego, en el evento onclick ubicas una llamada a la funcion segun el nombre asignado y el id del elemento debe ser igual al argumento pasado a la funcion getElementById. por otro lado, el codigo de Adler necesita un peque~no cambio:

Código:

// esta linea;
        if (obj.style.display == "none")  obj.style.display= "none";
// deberia ser;
        if (obj.style.display == "none")  obj.style.display= ""; // un string vacio o "block";

konoyek · #7 (**permalink**) 12/07/2009, 09:03

ya coloque segun tus especificaciones lasel codigo como deberia ir pero aun sigue sin pasar nada

Código HTML:

<!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&iacute;tulo</title>


<script type="text/javascript">
function nombre_funcion(){
var obj = document.getElementById("id_DIV");
    
        if (obj.style.display == "none")  obj.style.display= ""; // un string vacio o "block";
                else obj.style.display= "none";
				
				
				}
				</script>



                
</head>

<body>

<a href="javascript:void(0)" onclick="funcion();">Mostrar Contenido</a>
<div id="id">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
    Responder Citando
</div>


</body>
</html>

si algo te puedes dar cuenta el archivo lo tengo en el siguiente link:

http://konowar.com/prueba.php

zerokilled · #8 (**permalink**) 12/07/2009, 11:21

compara el codigo con el siguiente y estudia donde se hicieron los cambios:

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=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript">
function nombre_funcion(){
var obj = document.getElementById("id_DIV");
if (obj.style.display == "none")  obj.style.display= ""; // un string vacio o "block";
else obj.style.display= "none";
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="nombre_funcion();">Mostrar Contenido</a>
<div id="id_DIV">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
    Responder Citando
</div>


</body>
</html>

konoyek · #9 (**permalink**) 12/07/2009, 11:47

gracias por tu respuesta

al mirar el unico cambio que vi fue vincular el div "id_DIV" en el codigo html pero aun veo que el codigo me lo muestra de forma contraria jejeje esto quiere decir que si le doy click en donde dice mostrar contenido me oculta todo bla bla bla en este cas ahi como haria??

mira el link http://konowar.com/prueba.php

Adler · #10 (**permalink**) 12/07/2009, 11:57

Hola

Cambia esto

if (obj.style.display == "none") obj.style.display= "";

por

if (obj.style.display == "none") obj.style.display= "block";

y el div en none

<div id="id_DIV" style="display:none;">

Suerte

zerokilled · #11 (**permalink**) 12/07/2009, 11:58

@edit:
ignorar este mensaje

konoyek · #12 (**permalink**) 12/07/2009, 12:02

OK gracias el codigo quedo de la siguiente manera:

Código HTML:

<!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&iacute;tulo</title>
<script type="text/javascript">
function nombre_funcion(){
var obj = document.getElementById("id_DIV");
if (obj.style.display == "none")  obj.style.display= ""; // un string vacio o "block";
else obj.style.display= "none";
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="nombre_funcion();">Mostrar Contenido</a>
<div id="id_DIV" style="display:none;">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
    Responder Citando
</div>


</body>
</html>:aplauso:

Adler · #13 (**permalink**) 12/07/2009, 12:09

Hola

Cambia esto

if (obj.style.display == "none") obj.style.display= "";

por

if (obj.style.display == "none") obj.style.display= "block";

Es mejor así

Suerte

konoyek · #14 (**permalink**) 12/07/2009, 12:11

y si ahora necesitara colocar mas temas ejemplo:

prueba 1

(contenido)

bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla

(Fin contenido)

Prueba 2

(Contenido)

ja ja ja ja ja ja
ja ja ja ja ja ja
ja ja ja ja ja ja
ja ja ja ja ja ja

(fin contenido)

Adler · #15 (**permalink**) 12/07/2009, 12:22

Hola

Esto otro

Código javascript:

Ver originalfunction nombre_funcion(elDIV){
var obj = document.getElementById(elDIV);
if (obj.style.display == "none")  obj.style.display= "block";
else obj.style.display= "none";
}
</script>
 
 
<a href="javascript:void(0)" onclick="nombre_funcion('id_DIV1');">Mostrar Contenido</a>
<div id="id_DIV1" style="display:none;">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
    Responder Citando
</div>
 
 
<a href="javascript:void(0)" onclick="nombre_funcion('id_DIV2');">Mostrar Contenido</a>
<div id="id_DIV2" style="display:none;">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
    Responder Citando
</div>

Suerte

konoyek · #16 (**permalink**) 12/07/2009, 12:25

analizandos un poco el codigo puedo obtener la funcion de la siguientea manera:

Código HTML:

<!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&iacute;tulo</title>
<script type="text/javascript">
function nombre_funcion(){
var obj = document.getElementById("id_DIV");
if (obj.style.display == "none") obj.style.display= "block"; // un string vacio o "block";
else obj.style.display= "none";
}
function prueba(){
var obj = document.getElementById("id_DIV2");
if (obj.style.display == "none") obj.style.display= "block"; // un string vacio o "block";
else obj.style.display= "none";
}

</script>
</head>
<body>
<a href="javascript:void(0)" onclick="nombre_funcion();">prueba 1</a>
<div id="id_DIV" style="display:none;">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
    Responder Citando
</div>
<br />
<a href="javascript:void(0)" onclick="prueba();">Prueba 2</a>
<div id="id_DIV2" style="display:none;">
ja ja ja ja ja ja
ja ja ja ja ja ja
ja ja ja ja ja ja
ja ja ja ja ja ja
</div>
</body>
</html>

con este codigo me da el resultado que busco, no se si haya de pronto otro mas corto

zerokilled · #17 (**permalink**) 12/07/2009, 12:32

el ejemplo de Adler es la mejor alternativa. imaginate que tuvieras 25 contenidos ocultos para mostrar. no te imaginas la cantidad de codigo que tienes que duplicar, y en efecto el peso que a~nade al documento. de lo contrario, cual seria el sentido de las funciones y argumentos?

Adler · #18 (**permalink**) 12/07/2009, 12:33

Cita:

Iniciado por konoyek

con este codigo me da el resultado que busco, no se si haya de pronto otro mas corto

Sí, el que te di en mi post anterior

konoyek · #19 (**permalink**) 12/07/2009, 14:11

OK muchas gracias

una ultima cuestion si quiesiera saber sobre un poco mas de programacion sobre javascript o codigos basicos para el mismo que pagina me aconsejarian?

Adler · #20 (**permalink**) 12/07/2009, 14:57

Bueno eso es muy subjetivo, podrías empezar por

http://www.w3schools.com/js/default.asp

http://www.librosweb.es/javascript/index.html

http://www.wikilearning.com/tutorial...ascript/4466-1

http://www.maestrosdelweb.com/editorial/dom/

y claro está

http://www.forosdelweb.com/f13

Suerte