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.
<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>