Problemas con div

betoo1 · #1 (**permalink**) 14/07/2012, 07:56

Hola, he encontrado un codigo para mostrar y ocultar contenido en la pagina web:

<script language="JavaScript">

function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('mostrar');/* "mostrar" es el nombre que le dimos al DIV */
}
</script>

Este codigo funciona perfectamente cuando lo utilizas en el primer campo que quieras ocultar y mostrar. Lo que pasa, es que cuando lo quieres utilizar tambien para mostrar y ocultar un segundo campo, este campo apareze ya mostrado cuando entras en la web. Aunque tambien funciona la funcion de mostrar y ocultar, quiero que el campo, igual que con el primero, quede ocultado cuando entres en la pagina web.

Pablo Ayala · #2 (**permalink**) 14/07/2012, 08:01

Hola Betoo...

Espero haber entendido,

Quieres que cuando se abra la pagina este oculto tu div y tu campo, cierto?
Eso puedes hacerlo desde un principio con CSS:

Tu codigo HTML:

Código HTML:

Ver original<div id="midiv" class="oculto"></div>
<input type="text" id="miinput" class="oculto" value="" />

CSS:

Código CSS:

Ver original.oculto{
   display:none;
}

Lo que no me queda claro es, ¿Que tiene que hacer el usuario para mostrar de nuevo ambas cosas?

Saludos

betoo1 · #3 (**permalink**) 14/07/2012, 08:53

Gracias por la ayuda Pablo, el usuario, para ver uno de los dos campos hace click en la palabra que hace que se muestre uno de ellos.

El codigo que tengo puesto en <body>es este

<h1><a style='cursor: pointer;' onclick="muestra_oculta('mostrar/ocultar')">Palabra que hace que se vea/oculte el campo</a></h1>

<div id="mostrar/ocultar">
contenido
</div>

Como ya he dicho, en el primer campo se veria solo "Palabra que hace que se vea/oculte el campo" pero en el segundo se veria "Palabra que hace que se vea/oculte el campo" pero tambien con su contenido debajo.
El codigo de los dos que he puesto es exactamente el mismo, aparte de cambiar naturalmente el contenido y la palabra que hace que se muestre el contenido.
Quiero que el contenido NO se vea en los dos casos. Me puedes ayudar?

Pablo Ayala · #4 (**permalink**) 14/07/2012, 09:33

Ok, ya entendi... yo lo haria de la siguiente forma:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
    <head>
            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
            <style>
                .oculto{
                    display:none;
                }
                
                .muestraoculta{
                    cursor:pointer;
                }
                
            </style> 
        <script language="JavaScript">
        
        function muestra_oculta(link, id){      
            var el = document.getElementById(id);
            if (el.style.display=="none" || el.style.display=="" ){
                el.style.display="block"
            link.innerHTML = "Ocultar Campo";   
                }else{
                el.style.display="none"
                link.innerHTML = "Mostrar Campo";
            }                   
        }
        </script>
    </head>
    <body>      
    <h1><a class="muestraoculta"  onclick="muestra_oculta(this, 'contenido')">Mostrar Campo</a></h1>
 
    <div id="contenido" class="oculto">contenido</div>
    
    
    </body>
</html>

PD Usa CSS externos...