slide up problem in ie7

slide up problem in ie7

Hi,

I'm creating an accordion, but instead of using list, I used div
I'm having a problem with ie7 wherein, on a slideup, all the contents after the accordion follows, but the other neighboring h3(the other tabs of the accordion) remained in the same position.

Are there any way to fix this in css?

here is my javascript
  1.     $('#accordion h3').click(function()
  2.     {
  3.         $(this).next('div').slideToggle().css('position','relative');   
  4.     });
while this is the format of my html
  1. <span>a higher level accordion</span>
  2. <div>
  3. <p>another accordion</p>
  4. <div>accordion content</div>
  5. </div>
  6. <div>
  7. <h2>accordion that is having problem in ie7</h2>
  8. <div>
  9.   <h3>Title 1- title2 stays on the same position when this guy slides up </h3>
  10.   <div><table></table></div>
  11.   <h3>Title 2</h3>
  12.   <div><table></table></div>
  13. </div>
  14. <div>
  15. <h3>another accordion using the same function</h3>
  16. <div>
  17. accordion content
  18. </div>
  19. </div>
I also tried toggle with the same problem. so it's css problem I guess.

So far it is the one in the middle having problem with ie7. does anyone know what's triggering it?

Thanks