Question

I am having a problem in Chrome when I slideToggle() and element.

EDIT: Example here, click Link A a few times and you’ll see what I mean.

The HTML is along the lines of:

<div>
    <a>Link A</a>
    <a id="myLink">Link B</a>
</div>

With very simple CSS floating all the links to the left horizontally:

a{
  float: left;
  margin-right: 20px;
  height: 20px;
  width: 20px;
}

#myLink{
   display: none; 
}

The JavaScript simply toggles between showing myLink and hiding it on some event.

$('#myLink').slideToggle();

When slideToggle() is called the first time, everything works nicely; the link appears horizontally aligned with the other link. However, if I hide it again, when it reappears in Chrome/Safari the link appears underneath the other link (instead of alongside it). Also, I’ve noticed if I use the Developer Tools in Chrome and click on the element, it fixes itself and moves the link to be horizontally inline with the other link.

Anyone know of any issues with slideToggle() in WebKit?

Answer 1

Don’t float DIV or you can give it a width in pixels.