Mostrar y ocultar div con javascript | Recursos web, wordpress, programacion, ajax, css, mas..

Mostrar y ocultar div con javascript

Bueno hoy vamos a armar un pequeño ejemplo de como con javascript podemos mostrar y ocultar una div. Tambien vamos a ver la forma de implementar prototype en nuestro codigo. Para entender mejor lo que es prototype.. ya que no vamos a explicar lo que es en este ejemplo.. pueden darse una vuelta por este articulo escrito por iGeek.

1º Este es nuestro codigo javascript sin prototype para mostrar una div:

PLAIN TEXT

<script type="text/javascript"><!--
function ShowDiv(id){
if(document.getElementById(id).style.display=='none'){
document.getElementById(id).style.display='';
}else{
document.getElementById(id).style.display='none';
}
}
// --></script>

2º Ahora lo primero q tenemos que hacer es incluir el js de prototype dentro de nuestro archivo html. De la siguiente manera:

PLAIN TEXT

<script src="prototype.js" type="text/javascript"></script>

3º Nuestro codigo con prototype nos quedaria algo asi:

PLAIN TEXT

<script type="text/javascript"><!--
function ShowDiv(id){
if($(id).style.display=='none'){
$(id).style.display='';
}else{
$(id).style.display='none';
}
}
// --></script>

La diferencia que vemos entre los 2 codigos seria el uso de la funcion $ con prototype, ya que esta nos simplifica escribir document.getElementById.
Espero que este pequeño ejemplo les sirva de algo. Les recomiendo que se den una vuelta por las siguientes paginas, van a poder encontrar mucho mas contenido de ajax, javascript y de este muy buen framework como en prototye.

Por ultimo aca les dejo el ejemplo y el codigo de fuente final:

27/09/2008