question about combining jquery tabs and a toggling horizontal slide panel
- by Clay
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!