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