En realidad no es que el div crece para arriba o para abajo, lo que hace es cambiar el tamaño, para lograrla apariencia que buscas podes colocar un div que sea el botón abajo del div que crece.
El código está bien pero si usas animate sólo para cambiar el tamaño del div podés usar slideDown y slideUp
esto
$("#boton1,#boton2,#boton3,#boton4,#boton5,#boton6 ")
podés cambiar por
$(#contenedor>div)
imaginate si ya no queres que se llamen botonN sino botoncitoN tendrías que cambiar en cada uno de los selectores en jquery jeje que se yo si por ahi se da esa posibilidad
Código Javascript
:
Ver original<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready( function (){
$(".cont").slideUp(0);
$(".boton").click( function () {
$('.activo').removeClass('activo').slideUp(500);
$(this).parent().find('.cont').addClass('activo').slideDown(500);
});
});
</script>
<style>
.boton{background-color:red; }
.cont{background-color:blue; }
</style>
</head>
<body>
<div id="contenedor">
<div class="bloque">
<div class="cont">11111<br />1111111<br />111111</div>
<div class="boton">Boton1</div>
</div>
<div class="bloque">
<div class="cont">22222<br />222222<br />222222</div>
<div class="boton">Boton2</div>
</div>
<div class="bloque">
<div class="cont">333333<br />333333<br />33333</div>
<div class="boton">Boton3</div>
</div>
<div class="bloque">
<div class="cont">4444444<br />444444<br />44444</div>
<div class="boton">Boton4</div>
</div>
<div class="bloque">
<div class="cont">5555<br />55555<br />5555555</div>
<div class="boton">Boton5</div>
</div>
<div class="bloque">
<div class="cont">6666666<br />666666<br />66666666</div>
<div class="boton">Boton6</div>
</div>
</div>
</body>
</html>
lo que hago es
primero cierro los div con clase cont
$(".cont").slideUp(0);
uso un evento click en los div con clase boton
busco div que tenga clase 'activo', elimino la clase 'activo' y lo cierro
$('.activo').removeClass('activo').slideUp(500);
del boton que se hizo click voy al padre y busco el div con clase 'cont' y le agrego la clase 'activo', por último lo abro
$(this).parent().find('.cont').addClass('activo'). slideDown(500);
y listo