I found this sliding panel script I like at http://www.webdesignerwall.com/demo/jquery/, (#1 Sample Slide Panel) and played with it in my sandbox. The page loads both in the example, and my sandbox, closed.
So, I change it a bit to fit my needs, and got it working just the way I wanted, and was feeling pretty proud of myself, and then it hit me - In my implementation, the page loads with it open. I need it to be closed.
This is driving me mad, especially because they haven't decided if it's cool for us to start using JQuery in our main project, and I'm using it here, because it's for a one off, standalone tool. I know it'll look really cool to management, and am hoping they'll say, 'Well, that's nifty. You all should use that JQuery thing in the main project.'
Here's the page itself:
<p class="slide" style="float: left; width: 10px;">
<a href="#" id="slider_1" class="btn-slide"></a>
</p>
<span style="padding-left: .1em;">Filter</span>
<br />
<div class="slidepanel" id="panel1" >
A TABLE
</div>
And then the JQuery script:
$(document).ready(function(){
$(".btn-slide").click(function(){
var number = $(this).attr("id").split("_")[1];
$("#panel"+number).slideToggle("slow");
$(".slide").toggleClass("active"); return false;
});
});
And finally the css portion:
.slidePanel {
background: #754c24;
height: 400px;
display: none;
}
.slide {
margin: 0;
padding: 0;
background: url(../images/menu_closed.gif) no-repeat center top;
}
.btn-slide {
background: url(../images/menu_closed.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background: url(../images/menu_open.gif) no-repeat center top;
}