Problema con botones desplegables

[jesus_e_borquez_m]

Buenas tardes, lo que pasa es que tengo una página donde agregue una serie de botones tipo acordeón, el problema, es que al darle clic a los botones pasa lo que se muestra en la imagen:



Como se ve, quisiera que al darle clic me desplazara el contenido que está por debajo. Aquí dejo el código css y JavaScript, de antemano agradezco su respuesta:

Código JavaScript:

$('dl dd').hide();
$('dl dt').click(function(){
if ($(this).hasClass('activo')) {
$(this).removeClass('activo');
$(this).next().slideUp();
} else {
$('dl dt').removeClass('activo');
$(this).addClass('activo');
$('dl dd').slideUp();
$(this).next().slideDown();
}
});

Código css:

Código:

dl{ margin: 60px auto; width: 650px; height:40px; position:relative; left:0px; top:-310px; font-family: 'BenchNine',        sans-serif; font-size:30px;  }
		dt, dd{ padding: 5px; margin-bottom:20px; }
		dt{ background: #8e8e8e; color: black; border-bottom: 1px solid #141414; border-top: 1px solid #4E4E4E; cursor: pointer;         }
		dd{ background: #000; line-height: 1.6em; border-left: 1px solid #8e8e8e; border-right: 1px solid #8e8e8e; border-bottom: 1px solid #8e8e8e; color: white; font-size:21px; margin:20px 20px 0px 20px; padding:30px; width:587px; position: relative; left:-20px; top:-21px;}
		dt.activo, dt:hover{ background: #df2237; color:white; }