Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

content disappearing when using jquery slideToggle in IE7

I've seen this question asked several times but haven't seen any answers.

I have a ul that I'm expanding and collapsing using slideToggle() with jquery. The code is simple:

$('#leftMenu li a.moreLess').click(function() {
    $(this).next().slideToggle('normal');   
});

With markup of:

<a class="moreLess">Click here to see more</a>
<ul>
  <li>something</li>
  <li>something else</li>
  ...
</ul>

I have a button with a class of .moreLess and when it is clicked the list below it should expand or collapse. For some reason in IE 7 all of the content is disappearing once the list is fully expanding. When it collapses, the content appears again until the list is fully closed.

I'm not sure if this is something CSS related, but I was hoping someone might have run into this before. Thanks in advance for your help!

like image 256
Munzilla Avatar asked Jul 27 '10 21:07

Munzilla


3 Answers

put a zoom:1 property. it works with position:relative.

like image 57
Phenom Avatar answered Nov 03 '22 00:11

Phenom


FYI the problem was with CSS positioning on the elements inside the UL that is being toggled. Once I removed any relative and/or absolute positioning on those elements, the problem no longer happened.

like image 43
Munzilla Avatar answered Nov 03 '22 00:11

Munzilla


put overflow: hidden; for the div in which you have the content, that gets messed up. Works for me, but still it's and IE bug...

like image 33
thorinkor Avatar answered Nov 03 '22 00:11

thorinkor