PDA

View Full Version : Jquery Drop Down



CooKachoo
27 Aug 2009, 03:28 AM
Hello, I am trying to build a simple Jquery panel, that will expand and collapse. At the moment the script is only suppose to expand an otherwise hidden panel.

I apologize, but I am having trouble initiating the forums code formatting.

Bellow is my .js file

$(document).ready(function() {

$("#expand").click(function(){ $("div#slider").slideDown("slow"); });

$("#collapse").click(function() $("div#slider").slideUp("slow"); });

});


My style sheet

#slide-wrap {
width: 960px; height: auto; min-height: 50px;
margin: 0 auto;
position: absolute;
top: 920px; z-index: 999
}

#slider {
background: #333;
width: 960px; min-height: 480px;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#tab {
background: #333;
position: relative;
margin: 0px auto;
float: right;
clear: right;
height: 50px; width: 120px;
right: 150px;
text-align: center;
}

And my markup

<div id="slide-wrap"><!-- Slide Wrap -->

<div id="slider"><!-- Slider -->
</div><!-- /Slider -->

<div id="tab"><a class="expand">Upload</a></div> <!-- /Tab -->


</div> <!-- /Slide Wrap -->

I understand that this is a very simple setup, but shouldn't it be enough to expand the hidden div?

Thanks for any help.