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
