I am trying to create a panel that is positioned behind the header of my website, with a tab that sticks out below the header. When this tab is clicked, I want the panel to slide down from behind the header, and when clicked again, I want it to slide back up. Since I have never worked with JavaScript before, I have put together some code but seem to be missing something...
Could someone please guide me on what I might be doing wrong? My goal is for the panel to smoothly slide down and up, and I would like the code to be as concise as possible. You can view my test site here:
CSS (Please note that I have temporarily increased the z-index of this element to show its position relative to the header).
#panel-hhs
{
position: relative;
height: 166px;
width: 206px;
top: 0;
left: 0;
margin-top: -137px;
margin-left: 998px;
background: url('images/hhs_panel.png');
background-repeat: no-repeat;
background-position: center;
z-index: 130;
}
HTML (I have included my entire header; the JavaScript is at the bottom)
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jQuery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jQueryUI.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
</head>
<body>
<div id="banner-wrap">
<div id="banner-bar">
<div id="banner-hood">
<center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_hood.png" style="float:center"></center>
<div id="banner-logo"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_logo4.png" style="float:center"></center></div>
<div id="banner-text"><center><a href="#"><font face="georgia" color="#8a0304"">HOME</font></a> <a href="#"><font face="georgia" color="#8a0304">LISTINGS</font></a> <a href="#"><font face="georgia" color="#8a0304">AGENTS</font></a> <a href="#"><font face="georgia" color="#8a0304">SEARCH MLS</font></a> <a href="#"><font face="georgia" color="#8a0304">RENTALS</font></a> <a href="http://www.google.com"><font face="georgia" color="#8a0304">HISTORY</font></a> <a href="#"><font face="georgia" color="#8a0304">CONTACT</font></a></center></div>
<div id="banner-svc"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_svc.png"></center></div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jquery("#panel-hhs").toggle(function() {
jquery(this).animate({top: "-=100px"});
}, function() {
jquery(this).animate({top: "+=100px"});
});
});
</script>
<div id="panel-hhs"><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/hhs_pic2.png"></div>
</div>