Hi,

I'm attempting to combine a horizontally sliding panel and the ui tabs plugin. The idea is that you press a button, a panel slides open and inside is a series of tabs that expand content below.

In terms of getting this to function in the most basic sense, so far so good:

http://www.claylerner.com/bio_alt/

And my source looks like this:

$(document).ready(function(){

$(".btn-slide").click(function(){
    $("#panel").animate({width: 'toggle'});

  });

});

$(function() { $("#tabs").tabs({ selected: -1 });

});

However, the problem I'm running into occurs when you have a tab exapnded and then you collapse the horizontal panel--as you can see the animation that hides the currently expanded tab looks pretty clunky. I get that this is happening because there's not a separate function hiding the expanded tab.

So my question is, how can I make it so that when the button to collapse the panel (".btn-slide") is toggled it first hides any currently expanded tabs and then hides the open panel.

Thanks so much!