"En la vida solo hay dos tipos de personas, las que dan pretextos y las que dan resultados, ¿y tu cual tipo de persona eres? "

Soy una persona apasionada por todo lo que tiene que ver con Internet y las nuevas tecnologías. Soy autodidacta, y me encanta impartir clases...


Mostrar y ocultar con Javascript

Viernes 05 de Marzo de 2010

Javascript
Autor: César Cancino
Categoría: Javascript
Etiquetas Programación, php, mysl
Comentarios 8

Este es un sencillo script mediante el cual podemos crear un sistema de navegación para nuestro sitio web, ocultando y mostrando objetos según la selección que el usuario realice:

¿Qué te gustaría compartir con nosotros?

Compartir

Este es un sencillo script mediante el cual podemos crear un sistema de navegación para nuestro sitio web, ocultando y mostrando objetos según la selección que el usuario realice:
Primero crearemos una función para ir ocultando los elementos que necesitemos, de acuerdo al id que le indiquemos:
<script language="javascript" type="text/javascript">
function ocultar(id){
document.getElementById(id).style.display="none";
}
</script>

Ahora crearemos otra función para ir mostrando los elementos que necesitemos, siempre de acuerdo al id que vayamos pasándole. Si nos fijamos bien, en ambas funciones estamos usando el método CSS display para mantener visibles o no los elementos de la página:
<script language="javascript" type="text/javascript">
function mostrar(id){
ocultar("uno");
ocultar("dos");
ocultar("tres");
document.getElementById(id).style.display="block";
}
</script>

A continuación les muestro un archivo completo en el cual implemento este código para que se entienda mejor. En él, creo 3 capas y las voy mostrando y ocultando de acuerdo a la selección del usuario.
Nota: Este código lo aprendí de mi gran amigo José Miguel Aragonese :

<html>
<head>
<title>.:: ::..</title>
<script language="javascript" type="text/javascript">
function ocultar(id){
document.getElementById(id).style.display="none";
}
function mostrar(id){
ocultar("uno");
ocultar("dos");
ocultar("tres");
document.getElementById(id).style.display="block";
}
</script>
</head>

<body>
<a href="javascript:mostrar('uno')">Uno</a>
<br>
<a href="javascript:mostrar('dos')">Dos</a>
<br>
<a href="javascript:mostrar('tres')">Tres</a>
<div id="uno" style="display:none">Primer contenido</div>
<div id="dos" style="display:none">Ahora vemos el segundo contenido</div>
<div id="tres" style="display:none">y finalmente vemos el tercer contenido</div>

</body>

</html>


8 Comentarios

  1. David
    Sábado 04 de Mayo de 2013

    Buenas, tengo una pequeña página que crea los href en función de unas consultas a una base de datos(usando php), o sea, son dinámicos. Lo que quiero es que cuando se pinche un href aparezca un div, y en este, tendré que hacer nuevas consultas a la base de datos, por lo tanto deberé llevarme al div una variable.

  2. felipe
    Jueves 11 de Abril de 2013

    Gracias !! me salvaste el pellejo

  3. Jorge
    Jueves 07 de Febrero de 2013

    Gracias César por este aporte, me ha funcionado perfectamente!

  4. ronald
    Jueves 17 de Enero de 2013

    cesar por favor ayúdame que ya estoy desesperado e intentado todo llevo buscando mas de una semana todo el tiempo la solución a mi problema la pregunta la postee aquí http://www.forosdelweb.com/f13/mostrar-ocultar-mas-div-con-efecto-accordion-1032458/por favor si te queda un chance échame una mano brother no me dejes esperando saludos y gracias :)

  5. ronald
    Miércoles 16 de Enero de 2013

    cesar con respecto a la petición anterior probando tu código me salio tal cual lo estaba buscando muchas gracias pero te podría pedir un favor le podrías agregar a tu código la opción de que si volvemos a clikear en por ejemplo en "uno" después de estar visible el id="uno" que se esconda nuevamente es que no hace nada osea una ves se vuelven visibles no se dejan volver a ocultar todos los id gracias y saludos

  6. ronald
    Miércoles 16 de Enero de 2013

    muchas gracias cesar cancino por este tutorial pero yo necesito un sistema parecido al de http://tucinecom.com/pelicula/los-vengadores-2012-ver-online-y-descargar-gratis/ que al darle clip en reproducir se muestra el contenido y que si le damos clip ya sea en el mismo reproducir o en otro se cierra el contenido oculto del anterior y se abre el solicitado de tal manera que siempre halla solo 1 contenido oculto mostrado espero me eches una mano con eso y muchas gracias :)

  7. Pablo
    Martes 13 de Noviembre de 2012

    Gracias César, muy buen contenido y buena explicación.

  8. Carlos Chire
    Viernes 01 de Octubre de 2010

    Gracias Cesar buen contenido tal como lo explicas en el videotutorial php.