[kumaraj]

Hi there,

On my site I have an image with a map. When clicking on one of these areas I want another image to appear below it. However, when it appears I want it to use a transition, such as a fade or slide in. So I have decided to use the slideToggle - it doesn't work. If you want to see my site please click here.

Any help is much appreciated.

[moopet]

kumaraj, on 12 March 2010 - 06:16 PM, said:

Hi there,

On my site I have an image with a map. When clicking on one of these areas I want another image to appear below it. However, when it appears I want it to use a transition, such as a fade or slide in. So I have decided to use the slideToggle - it doesn't work. If you want to see my site please click here.

Any help is much appreciated.

The slideToggle effect won't work with the alements being absolutely positioned like that. You could use fadeUp() and fadeDown() instead
Also, you're using a span (inline) to contain divs (block elements), which is probably causing grief somewhere. Change the #expand span to a div.

[kumaraj]

moopet, on 12 March 2010 - 02:34 PM, said:

kumaraj, on 12 March 2010 - 06:16 PM, said:

Hi there,

On my site I have an image with a map. When clicking on one of these areas I want another image to appear below it. However, when it appears I want it to use a transition, such as a fade or slide in. So I have decided to use the slideToggle - it doesn't work. If you want to see my site please click here.

Any help is much appreciated.

The slideToggle effect won't work with the alements being absolutely positioned like that. You could use fadeUp() and fadeDown() instead
Also, you're using a span (inline) to contain divs (block elements), which is probably causing grief somewhere. Change the #expand span to a div.

This works beautifully, just one question, why doesn't slideToggle work?

[moopet]

kumaraj, on 13 March 2010 - 08:40 AM, said:

This works beautifully, just one question, why doesn't slideToggle work?

When you think about what the slide*() effects are doing, they're playing around with absolute positioning. SlideToggle would work fine if you didn't have absolutely positioned divs inside it. What it's doing is setting the opacity so the #expand element is visible, then moving it down or up, but inside the #expand div, the sub-elements (which are now visible) override the slide with their hard-coded absolute positions. If you take those out, it definitely works because I just tried it (albeit in the wrong place on the screen)
Try something like:

<div id="expand" style="position:absolute; left: 0; top: 610px;">
  <div style="position: relative;">

    <div style="position:absolute; top:10px; left:0; z-index:2;">
      <ul> (snip) </ul>
    </div>

    <div style="position:absolute; top:0; left:0; z-index:1;">
      <img src="Menu expander.png">
    </div>

  </div>
</div>

Which should make the elements position with respect to the #expand div instead. I haven't tested it, but it should work. Also, you shouldn't have style="top: 610;" since it's invalid - it needs to be 610px - which might cause problems in some browsers.

[PsychoCoder]

Moving to jQuery forum