Sliding div in jquery
- by Sean
I am trying to make a toolbar type section on the top of my site. I just need one div that will be hidden by default, and a button that will be hanging off the bottom of that div. When it is clicked, the div should slide down (with the button still on bottom). And upon clicking, it should slide back up.
Here is what I currently have:
<div id="account_toolbar" style="background-color:#fff;">
<div id="toolbar_contents" style="display:none;"> This is the account toolbar so far
</div>
<div id="button" style="background-color: #ff0000;"><%= image_tag "templates/_global/my_account.png", :id => "my_account_btn", :style => "float: right; margin-right: 100px;" %></div>
</div>
The image tag is using ruby/rails syntax, so pay no attention to that. It will render like any other image tag.
Here is the jquery i'm using:
$('#my_account_btn').click(function () {
$('#toolbar_contents').slideToggle();
});
So, this is actually working for the most part. My problem however is that the spacing where the toolbar content div goes, pushes the account button down. When it slides up or down it temporarily attaches itself to the bottom of the div, then jumps back down once it is finished sliding (leaving a gap between the bottom of the hidden div and the top of the account button).
I hope that makes sense.
thanks
