Question

I have content below jQuery tabs which is sliding up and down with the tabs. The tabs are collapsible and the content is also sliding up when a tab is closing. But when I am switching between tabs, the content also moves up and down when it should stay in place. I tried to solve this problem with the event handlers, but as you can see here http://jsfiddle.net/eqUVm/5/ , the problem still exists.

Does anyone know a possible solution for my problem?

Edit: I forgot something essential: the content (the map) needs an absolute position otherwise it is not shown. Link updated

Answer 1

See http://jsfiddle.net/kXS4g/4/

I’m animating only when the tab is de-selected. There’s apparently no deselect event in jQuery ui, so I check for selection by counting the ‘ui-tabs-selected’ elements (should be zero). Unfortunately, this css class isn’t removed until after the select callback is done so the hackish approach I chose to use was setTimeout to delay the function call.

---

You might also want to tweak the timing on that setTimeout. I fiddled around with it a bit and it was slightly unreliable if you clicked rapidly or the computer hung. Anything under 20ms will be imperceptible.

Another trick – you can use stop(false,false) to prevent double animation of rapid switching – the animation will attempt to continue from where it left of. Meaning, if you open the tab and halfway through the animation you decide to close it the animation will immediately cycle backwards instead of queuing.

Consider investigating a more formal way of detecting that deselection if you come across issues with that setTimeout(..., 20). I just wanted to get it working for you.

Finally, I used console.log to get a sense of when events where firing. My expectation that select is fired only when you select tabs was false, as was the assumption about when css classes are added/removed. Breakpoints would have worked equally well (readily available in Firebug or Chrome). Sometimes the manual doesn’t get into these details.