Algo similar al spoiler

[Ciel]

Hola a todos,

Primero quisiera aclarar que se muy poco de javascript, en realidad nada... aunque al leerlo algo lo entiendo ya que tengo una base de programacion.

Lo que yo busco hacer es lo siguiente, se los muestro con una imagen (powered by paint):



Esos cuadritos grises serian botones, y lo rojo seria un div que esta por dejaba...

Lo que yo quiero es que al tocar alguno de esos botones el div ese de color rojo se vaya un poco para abajo y que en ese espacio que quedo debajo de los botones aparezca algo...

Para agregar un ejemplo al tema... yo empece usando lo siguiente: http://www.nv-arg.com.ar/demosweb/seguinos.html

Pero que paso, me di cuenta que queria agregar mas de 1 boton y ahi vino el problema... por eso quiero buscar alguna alternativa... no se si alguien sabe de algun plugin de jQuery o me puede mostrar algun ejemplo o algo, le estaria muy agradecido.

Muchas gracias de antemano.

[lair]

Hola.

Por que no simplemente colocas un div entre los botones y el otro div (el rojo) y el div de en medio lo recargas con el metodo load de jquery

[Ciel]

Muchisimas gracias lair. Sinceramente cuando lei tu post te iba a pedir de algun demo, pero mejor espere y buscando por ahi logre exactamente lo que queria.

Acabo de editar el ejemplo que postie arriba, mira: http://www.nv-arg.com.ar/demosweb/seguinos.html

Y ahora me surgieron 2 pequeñas dudas...

1) Esta bien el codigo javascript? algo que optimizar? o corregir?

2) Esta es la mejor manera de lograr esto? o hay una mejor? (me refiero al load).

Gracias.

[Ciel]

Disculpen por el bump, pero plz necesito que me respondan, por lo menos la primer duda que tengo.

Ya que no se mucho de javascript y generalmente en programacion cuando no sabes mucho de cierto lenguaje pero te sale algo bien, muchas veces hay algo que optimizar. O sea, el script lo estoy usando en una web y funca perfecto pero quisiera saber si se puede resumir el codigo u optimizarlo o si tiene algun error.

EDIT: El codigo seria este:

Código Javascript:

<script type="text/javascript">
 
$(document).ready(function(){
 
   $("#destino").hide();
 
    
 
   $("#social").click(function(evento){
 
      evento.preventDefault();
 
    $("#destino").hide();
 
      $("#destino").load("social.html");
 
    $("#destino").fadeIn(1000);
 
   });
 
 
 
   $("#navegadores").click(function(evento){
 
      evento.preventDefault();
 
    $("#destino").hide();
 
      $("#destino").load("navegadores.html");
 
    $("#destino").fadeIn(1000);
 
   });
 
 
 
   $("#reset").click(function(evento){
 
      evento.preventDefault();
 
    $("#destino").hide();
 
   });
 
})
 
</script>
 

Gracias de antemano.