content disappearing when using jquery slideToggle in IE7

Question

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!

possible duplicate of [jQuery slideDown in IE9 - content disappears after animation finishes](http://stackoverflow.com/questions/4087719/jquery-slidedown-in-ie9-content-disappears-after-animation-finishes) — sth, Nov 13 '11 at 14:52

score 18 · Answer 1 · answered Nov 02 '11 at 09:34

18

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

answered Nov 02 '11 at 09:34

Phenom

181
1
2

Worked for me! sometimes IE being so bad is actually a good thing, as there's tons of documentation out there about how to solve it. much better than just being temperamental – Ben Taliadoros Apr 18 '13 at 09:53

score 10 · Accepted Answer · answered Jul 28 '10 at 18:29

10

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.

answered Jul 28 '10 at 18:29

Munzilla

3,805
5
31
35

1

Thanks a lot for coming back and answering your own question, ran into the exact same problem and this fixed it for me. – Hugo Migneron Jun 23 '11 at 14:07
1

Also seems to be an issue when you have postition:relative|absolute for the thing being toggled (not just the contents). In my case it was a div. The fix by Phenom (set zoom:1 property) solved my problem. – djangodude Mar 22 '12 at 16:33

score 4 · Answer 3 · answered Oct 15 '12 at 10:42

4

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...

answered Oct 15 '12 at 10:42

thorinkor

958
1
11
20

score 0 · Answer 4 · answered Jan 14 '13 at 09:12

0

in my case the content loaded with slideToggle was "shifted" down creating 2 empty space (only in IE7)

i solved with this css:

form {
    margin: 0;
}

answered Jan 14 '13 at 09:12

HypeZ

4,017
3
19
34

content disappearing when using jquery slideToggle in IE7

4 Answers4