Toggling large elements looking clunky

Toggling large elements looking clunky

Hello all,

I have a simple question regarding toggling large elements. When I use toggle to show/hide large elements I often get a "clunky" sort of effect. This is because the browser window has to re-size along with the page. I threw together a quick example of what I mean, it can be viewed HERE . You can sort of see it in the example if you scroll down before you hit the checkbox to hide the fieldset. This is even more noticeable the more elements that are displayed. Here is the simple code I threw together to illistrate the problem:

  1.     <form>
  2.         <fieldset>
  3.         <legend>First Fieldset </legend>
  4.             <p><label>First Field</label></p>
  5.             <p><label>Second Field</label></p>
  6.             <p><label>Third Field</label></p>
  7.         </fieldset>
  8.    
  9.         <fieldset id = 'second_fieldset'style = 'display:none'>
  10.         <legend>Second Fieldset</legend>
  11.             <p><label>Filler Field</label></p>
  12.             <p><label>Filler Field</label></p>
  13.              //I just copy and paste the filler fields about 15 times to fill in some space
  14.         </fieldset>
  15.         <p><label for = 'toggle'>Toggle:</label><input type = 'checkbox' name = 'toggle' id = 'toggle'/><p>
  16.         </form>
  17.     </body>
The code to make the toggle happen:

  1.     $(function(){
  2.         $("#toggle").click(function(){
  3.             $("#second_fieldset").toggle('slow');
  4.         });
  5.     });
I'm not sure if there is anything that can be done about this type of thing since it may be a characteristic of the browser. Could anyone tell me if  there is sort of method used to make hiding and showing larger elements appear more smoothly when they cause the browser window to resize?

Thanks much for reading the post, any help is appreciated!

Jstall