Hello there, I am new in web designing. Today I am facing a new and of course VERY ODD problem. I created a test page and used some JQuery hide(), show(), slideToggle() effects in several elements. The work is, if anyone clicks a content, a hidden table, or div is shown. And if anyone again clicks it, it disappears again.

I am going to attach my file as zipped as you will need it. First open index.html in the attachment. You will see a right-column named 'the syllabus'. Click any of the "First Term", "Second Term" or third- a hidden div will be shown. But while happening so, look at the whole body closely, you will see that the page shakes off a bit and it moves a bit left (or maybe right). Why is this happening?

The same thing happened for the left column data tables too (Click "First Term" and so on in the left column to display the tables), I fixed them by lowing down the top and bottom padding of the table (th, td) to a great extent. But for the right column, lowing down the top and bottom padding makes the layout look bad. Again, I don't understand why the shaky effect is taking place for top and bottom padding.

My Page.zip

Note: I used 960 Grid System (960.gs) to create the layout

@ralph.m
@Paul O'B
(Wanna mention these people for helping me in my previous problems)