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.

Code:
<style>
body { margin: 400px 50px; }

#coltab { position: relative; text-align: center;
height:370px;}

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

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

#coltab span.open { display: block; }

</style>

<head>

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

</head>

<body>



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

<script>
$(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 () {
        $(this).removeClass('open');  
    });

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

});
});
</script>
</body>