div oculto

[erick_perez]

Saludos amigos !! tengo una curiosidad que ya ando resulviendo por medio de la web, solo que necesito informacion de los expertos de este foro, bien, tengo el siguiente codigo :

//en este div pienso colocar todos los demas Div
#contenedor{
width:981px;
height:610px;
position:relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-repeat: no-repeat;
background-position: 0 0;
background-image: url();
}


//Aqui quiero poner una botonera
#menu{
width:140px;
border:7px solid #DDDDCA;
color:#878767;
margin-top: 0;
margin-right: 0;
margin-bottom: 4px;
padding-top: 5px;
padding-right: 1px;
padding-bottom: 6px;
padding-left: 1px;
height: 480px;
float: left;
margin-left: 1px;
}

//contenido1 aqui pretendo hubicar contenido "principal" que cuando el usuario
//abra la pag en donde esta este codigo, este div se muestre

#con1{
width:640px;
border:#DDDDCA solid 7px;
color:#878767;
margin-top: 0;
margin-right: 0;
margin-bottom: 4px;
padding-top: 5px;
padding-right: 1px;
padding-bottom: 6px;
padding-left: 1px;
height: 480px;
float: left;
margin-left: 2px;
}

//contenido 2; explicare mas a detalle de lo que quiero hacer!
#con2{
width:640px;
border:#DDDDCA solid 7px;
color:#878767;
margin-top: 0;
margin-right: 0;
margin-bottom: 4px;
padding-top: 5px;
padding-right: 1px;
padding-bottom: 6px;
padding-left: 1px;
height: 480px;
float: left;
margin-left: 2px;
}

Teniendo esto como base, lo que quiero hacer es que, cuando un usuario pulse el boton1 del div menu "jale" otro div (con2) y que con1 desaparesca, es decir que con2 tome el lugar de con1.......si el usuario pulsa boton2 del div menu "jale" otro div (con3) y que tome el lugar de con2..... y esto para n botones! hasta el momento he logrado que aparescan los div, pero no he logrado que tomen el lugar de otrol otro div, uso el sigueinte script :

<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('con2');/* "con2" es el nombre que le dimos al DIV */
}
</script>

Esto lo hago con dos archivos: El html que jala al css.
Ahora solo falta que el div que es llamado por el boton Ocupe el lugar del div que se esta mostrando, como hago esto posible?

[PrendekZ]

Bueno, compañero..

explicate mejor lo que quieres, no entiendo bien, dale con ejemplos y te ayudaremos con gusto.

Edit:

quieres hacer lo de mi web?..

www.westden.net

[erick_perez]

Que tal Prendekz exactamente compañero es lo que quiero hacer, en especial lo que hace el boton "sitiosweb" en secion "portafolio"....

[PrendekZ]

Bueno, enviame un MP con tu msn, asi te ayudaré con todo el gusto.

[masterojitos]

ESO es acordion no???

mira estos links

google: http://www.google.com.pe/search?hl=es&client=firefox-a&rls=org.mozilla%3Aes-ES%3Aofficial&hs=lpm&q=accordion+javascript&btnG=B uscar&meta=&aq=f&oq=

acordion horizontal: http://bassistance.de/jquery-plugins...gin-accordion/

acordion vertical: http://letmehaveblog.blogspot.com/20...accordion.html

suerte.