Jquery (not)selector / Horizontal Accordion

www.brianvargo.com/test.html

I'm working on an accordion with panels of different widths - the selected panel takes up 50% of the window, then retracts to its originial width upon mouseout.

I'm now trying to make all of the other accordion panels shrink when one is selected, such that you can still see all of the content, but the proportional relationships remain relevent. In other words, achieving an effect like this:

http://www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/

...but using the jquery dialogue I've been working on so I can maintain开发者_如何学Go various panel sizes.

Any Ideas? www.brianvargo.com/test.html

Looking at your code in animated-menu.js you are only animating(increasing width) of the hovered element. At the same time you also have to reduce the width of the adjacent element also so that there is enough real estate available for the element to fit within thee screen width available.