Stop and Close Tab when 2nd Tab Clicked - jQuery Tabs Navigation

I have Tabbed Navigation here: http://jsfiddle.net/EghAt/

When开发者_如何学Go I click Tab 1 it outputs all my list items underneath this tab - Great! However, if I click Tab 2 while Tab 1 is still outputting, it doesn't close Tab 1 and instead keeps outputting from both.

I would like to close Tab 1 if Tab 2 is clicked and vice-versa.

How do I achieve this with my code?

Many thanks for any pointers.

Resolved: http://jsfiddle.net/BdHf2/2/

While i like you timeouts solution, you could use an alternative where you use a global variable (gasp) to store the last clicked ul's id in a variable called lastClickedId.

Then, instead of using a delay for your list items to show up, you can use a recursive function to chain the callback of toggleFade so that it calls the next li element's fade. In your callback function, you will check if the current list's parent is the same as the lastClickedId and if it's true perform the fade for the current li element. Otherwise, it breaks the recursion.