Pull down panel

by karlgo

HTML

<div class="topPanel"></div>
<div class="topTab"><a href="#">Top Panel</a></div>
<div>Test text</div>

CSS

.topPanel{
    display:none;
    height: 100px;
    width: 200px;
    background: orange;
    position: relative;
    left: 100px;
}
.topTab{
    height: 20px;
    background: yellow;
    position: absolute;
    left: 160px;
    padding: 2px 10px;
}

JavaScript

/*
$('document').ready function () {
    $(function () {
        $('.topPanel').slideUp(0);
};
*/

$('.topTab a').toggle(function(){
    $(this).parent().prevUntil('.topTab').slideDown();
},function(){
    $(this).parent().prevUntil('.topTab').slideUp();
});