jarring toggling effect

Question

I have a fixed height div which looks like following. 2 issues.

1 - when I click the 'on_click"show_hidden_div' it does show the div but since the parent div is fixed height, I just get a scrollbar and now the user has to scroll down, any way to automatically scroll down when the hidden div is show?

2 - When the hidden div is hidden again(by clicking on the link), it seems the entire 'fixed_height' kinda does a jarring motion, while the div is being hidden. How to make this smooth?

I am using jquery obviously and this fixed height div is inside a jquery tools overlay div, basically this is a modal dialog.

here is the javascript

$('#on_click_show_hidden_div').live('click', function() {
        $('#on_click_show_hidden_div').toggle('slow');
        return false;
    });

  <div id='fixed_height>

    <div id='form-wrapper'>
    <!-- form and form element -->
    <form id='post_form'>
    <a id='on_click_show_hidden_div'></a>
    <div id='hidden_div_with_more_form_elements'></div>
    <input id='submit'/>
    </form>
    </div>

</div>

Answer 1

First, I'm going to assume that in your click event, you meant to toggle your hidden_div_with_more_form_elements, not the link itself.

Second, it would be helpful if you formatted your html sanely (i.e. double quotes)

Third, it would be helpful if you provided some basic CSS that shows the actual issue with the example html.

Finally, here's close to what you want:

$('#on_click_show_hidden_div').click(function() {
  $('#hidden_div_with_more_form_elements').toggle('slow', function(){
     var pos = $('#hidden_div_with_more_form_elements').position().top;
     $('#fixed_height').scrollTop(pos);
  });

  return false;
});

Here is a live example: http://jsfiddle.net/ryleyb/ewehW/

Essentially, jQuery's scrollTop provides what you want to do, and I'm using it in the callback from the toggle animation (i.e. scroll to it once it has been successfully animated in).