Как сделать так, чтобы спойлер раскрывался не вниз а вверх?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<div class="spoiler-wrap">  
<div class="spoiler-head folded"><div class='uSpoilerButton'><center>Спойлер :)</center></div></div>  
<div class="spoiler-body">  
<div class='uSpoilerText'>Текст под спойлером</div>  
</div>  
</div> 

<script type="text/javascript">  
jQuery(document).ready(function(){  
jQuery('.spoiler-body').hide()  
jQuery('.spoiler-head').click(function(){  
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()  
})  
})  
</script>  

.uSpoilerButton {width: 100%;border: none;background: #FFF;padding: 9px;color: #3f3f3f;cursor: pointer;margin-top: 3px;margin-bottom: 3px;margin-left: 35.5%}  
.uSpoilerButton:hover {background: #f5f5f5}  
.uSpoilerText {padding: 5 5 5 5px}