I have found this piece of code the works for a jquery slide up toggle. This issue I'm having is that when I click for it to slide up it does so but it appears that it's coming from below the coltab div. I'd appreciate if you could help me with a solution.

body { margin: 400px 50px; }

#coltab { position: relative; text-align: center;

#coltab > li {
    background: #ccc;
    color: #444;
    cursor: pointer;
    display: block;
    float: left;
    margin: 0 10px;
    padding: 10px 20px;
    position: relative;

#coltab span {
    background: #eee;
    color: #222;
    display: none;
    padding: 5px;
    position: absolute;
    left: 0;
    right; 0;
    top: 0;
    z-index: -1;

#coltab span.open { display: block; }



<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"> </script>



<div id="coltab">
    <li>Item 1<br/>(click me)
            <span>This first item needs to toggle up</span>

$(document).ready(function() {
$("#coltab li span").each(function (index) {
  $(this).data('height', $(this).outerHeight());    

$("#coltab li").click(function () {

    $("#coltab li span.open").animate({"top": 0}, function () {

    var itemHeight = $(this).children('span').data('height');
    $(this).find('span:not(.open)').animate({"top": -itemHeight}).addClass('open');