Mostrar / Ocultar div

GastoNike · #1 (**permalink**) 14/06/2008, 15:30

Hola, estaba creando un script para ocultar / mostrar un parrafo y todo me funciona bien si en los estilos está display: block pero si lo cambio a display: none tengo que dar 2 click al enlace para que empieze a funcionar. ¿Alguien sabe por qué pasa esto?
Vean a lo que me refiero:

http://www.blogstyle.com.mx/ejercicio14.html

Les agradecería enormemente si me ayudan.

Panino5001 · #2 (**permalink**) 14/06/2008, 15:47

Probá agregando esto al final de tu bloque de código javascript:

Código PHP:

  window.onload=function(){ 
var p,i;  
p=document.getElementsByTagName('p'); 
for(i=0;i!=p.length;i++) 
muestraOculta(i+1); 
}

GastoNike · #3 (**permalink**) 14/06/2008, 15:53

Si funcionó ^^ ¡GRACIAS! .... solo que no se por que, si no te es mucha molestia me podrías decir que estaba mal, es que lo tengo que adaptar a una página.

Saludos.

Hamn · #4 (**permalink**) 14/06/2008, 16:05

Tambien podes usar este

ponlo despues del </Div> a ocultar o mostrar

Código PHP:

  <a href="#" style='text-decoration:none;color:#FFCC00;' onClick="Alternar('test')"> Mostrar/Ocultar</a></td>

Recorda que podes cambiar los atributos al codigo y obtener cualquier otro color del texto.

Pero antes pon este scrip entre las etiquetas <Head></Head>

Código PHP:

  <script> 
function Alternar(Seccion){ 
cosa=document.getElementById(Seccion).style; 
cosa.display = (cosa.display=="none")?"":"none" 
} 
</script>

Espero sea una forma alternativa y les sirva.

Panino5001 · #5 (**permalink**) 14/06/2008, 16:06

Pasa que en primera instancia, el estilo display de los elementos está vacío (lo comprobás escribiendo esto en la barra de direcciones y haciendo click en el botón ir:javascript:alert(document.getElementById('conte nidos_1').style.display)
). Por eso, siempre entra en la primera parte del condicional de tu función al hacer click por primera vez, mientras que vos esparás que entre en la segunda parte.

spider_boy · #6 (**permalink**) 14/06/2008, 16:33

Hey man, disculpa por colgarme de tu tema, pero me ocurre lo mismo, pero con jQuery...

A ver si me pueden ayudar =(

Estoy usando este código

Código PHP:

  var LoadPhotosJQuery = { 
 
    load : function()   { 
        var links = $(".box_link"); 
         
        links.each( function(e) { 
            
            var elements = links[e].id.split('#')[1]; 
            
            $(links[e]).click( function(ev) { 
                ev.preventDefault(); 
 
                $.ajax({ 
                    type : 'get' , 
                    url  : "ajaxfiles/load_photos.php" , 
                    data : {orderBy:elements} , 
                    dataType : "html" ,              
                    error : function(er) { alert(er); } ,               
                    success : function(c) {   
                        $('#'+elements).text(c); 
                        $('#'+elements).slideToggle(200); 
                    }                             
                }); 
            }); 
        }); 
    }     
}

El problema está en estas líneas

$('#'+elements).text(c);
$('#'+elements).slideToggle(200);

Si lo pongo en ese orden, y clickeo algún link, me muestra rápidamente el div y se oculta de inmediato... pero si cambio el orden de estas líneas, al primer click no muestra nada y al segundo comienza a funcionar correctamente... no sé como solucionarlo... Gracias =)

GastoNike · #7 (**permalink**) 14/06/2008, 16:45

SpiderBoy no hay problema, mientras consigas ayuda....

Panino5001 Mil gracias enserio, ya hice la prueba y tienes razón, no lee el estilo del display del elemento a la primera... se me hace muy raro y otra vez no se por qué xD.

Hamn también probe tu script a ver que tal y si funciona solo que también hay que dar dos clicks para que funcione....

Mientras que descubro por qué no lo lee a la primera el estilo uso la solución de Panino5001 ¡GRACIAS! a todos.

spider_boy · #8 (**permalink**) 15/06/2008, 07:15

Ya lo solucioné. Tomé en cuenta la info qué dio Panino, y lo arreglé con esto...

if(document.getElementById(elements).style.display =="") {
document.getElementById(elements).style.display="n one";
}

Ya qué el estilo display estaba vacío, sólo debía darle el estilo manualmente...

Gracias Panino por la info =).

Panino5001 · #9 (**permalink**) 15/06/2008, 07:30

En realidad no es raro, porque tu estilo display está definido en una regla css, y para acceder al estilo desde javascript en el caso de las reglas se hace de otra manera. Diferente sería si aplicaras el estilo inicial inline, es decir definiéndolo con un atributo style. Un ejemplo de esto que te digo sería este, que como verás sí funciona como esperabas:

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>Ejercicio 14 - DOM b&#239;¿½sico y atributos XHTML</title>

    
<script type="text/javascript">
function muestraOculta(id) {
    var elemento = document.getElementById('contenidos_'+id);
    var enlace = document.getElementById('enlace_'+id);
    
    if(elemento.style.display == "" || elemento.style.display == "block") {
        elemento.style.display = "none";
        enlace.innerHTML = 'Mostrar contenidos';
    }
    else {
        elemento.style.display = "block";
        enlace.innerHTML = 'Ocultar contenidos';
    }
}
</script></head><body>

<p style="display: none;" id="contenidos_1">[1] Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas
nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis.
Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede.
Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor,
pede. Nullam sit amet nisl elementum elit convallis malesuada.
Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis
pellentesque, felis eu adipiscing ullamcorper, odio urna consequat
arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#" onclick="muestraOculta('1'); return false;">Mostrar contenidos</a>

<br>

<p style="display: none;" id="contenidos_2">[2] Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas
nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis.
Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede.
Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor,
pede. Nullam sit amet nisl elementum elit convallis malesuada.
Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis
pellentesque, felis eu adipiscing ullamcorper, odio urna consequat
arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#" onclick="muestraOculta('2'); return false;">Mostrar contenidos</a>

<br>
<p style="display: none;" id="contenidos_3">[3] Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas
nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis.
Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede.
Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor,
pede. Nullam sit amet nisl elementum elit convallis malesuada.
Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis
pellentesque, felis eu adipiscing ullamcorper, odio urna consequat
arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#" onclick="muestraOculta('3'); return false;">Mostrar contenidos</a>

</body></html>

sortega · #10 (**permalink**) 07/08/2008, 15:56

Hola. La solución de Panino5001 al problema de Gastonike funciona, pero ¿cómo se podría hacer para que, por ejemplo, cada uno de esos tres enlaces tenga un nombre diferente?

Edito: Ya encontré otra solución...

buzu · #11 (**permalink**) 07/08/2008, 21:43

si ya la encontraste seria bueno que la postearas, quizá alguien mas la este buscando...

Para evitar el problema tambien se puede definir la regla desde javascrip en la funcion que hace el set para el efecto. Esto es especialmente util cuando sabes el estado inicial que quieres que tengan tus elementos. Este problema es generado por que Javascript no puede acceder a los estilos CSS que no han sido declarados mediante javascript.

sortega · #12 (**permalink**) 08/08/2008, 09:38

Cita:

Iniciado por buzu

si ya la encontraste seria bueno que la postearas, quizá alguien mas la este buscando...

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

buzu · #13 (**permalink**) 08/08/2008, 15:52

Bien, solo te falto convertirla en enlace

http://www.dynamicdrive.com/dynamici...edcollapse.htm

See, con ganas de joder.....jajaja espero que te lo tomes con calma... solo que hoy me desperte con ganas de hacer gracia....

sortega · #14 (**permalink**) 09/08/2008, 14:49

Cita:

Iniciado por buzu

Bien, solo te falto convertirla en enlace

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

See, con ganas de joder.....jajaja espero que te lo tomes con calma... solo que hoy me desperte con ganas de hacer gracia....

jajaja, pero si aún tienes ganas de hacer más gracia, tons quéjate con el administrador del foro, porque no puedo poner enlaces hasta tener treinta mensajes como mínimo.

Nisiquiera puedo responder tu cita con tu enlace, ¿puedes creerlo?

Cita:

Por motivos anti-spam, solo es posible incluir enlaces o compartir direcciones web en sus mensajes, luego de que el usuario tenga más de 30 días de antigüedad y más de 30 mensajes publicados en el foro. Disculpe las molestias.

buzu · #15 (**permalink**) 09/08/2008, 18:21

No te preocupes, yo entiendo esa situación. Pase por las mismas cuando recién empece en el foro.... La buena noticia es que ya solo te falta 19 jajaja.