Jquery Selector in Horizontal Accordion

I'm Trying to build a simple horizontal accordion that will eventually contain more complex data (iframes)... The problem is that I want the size of each accordion tab to be specific开发者_运维技巧 to the data it contains, so I'm trying to edit what's already out there (Some tabs are larger than others). When a user hovers over any tab I want to expand that tab to 50% (regardless of its previous size). All that is working fine, but the problem is I can't figure out how to go back to the tabs ORIGINAL width after mouseout. Right now I have the panels shrinking to 10% to illustrate the problem. If you cycle through the page then reload you will see what i mean. Any ideas?

http://www.brianvargo.com/test.html

You can save the original width somewhere. This is one way (with your code):

$(document).ready(function(){  
    $("ul li").mouseover(function(){
        if (this.originalWidth == undefined) this.originalWidth = $(this).width();
        $(this).stop().animate({width:'50%'},{queue:false, duration:500,}) 
    });  

    $("ul li").mouseout(function(){  
        $(this).stop().animate({width: this.originalWidth},{queue:false, duration:600})  
    });  
}); 

Untested, and you might choose a different way to save it, but the general idea is there.

What worked for me in a similar situation to yours, was create an attribute with the original size on load of said element, then retrieve it for later use.