accordion con jquery

[abraiante]

Hola a todo el mundo.

No estoy seguro de que este hilo este aquí bien colocado, pero si no es así ruego que me disculpéis, y que un administrador lo mueva a donde corresponda.

Estoy intentando hacer un efecto acordeón para un menú que debe ser visual en vez de ser de texto y me he topado con el siguiente ejemplo que se adapta bastante a lo que yo necesito: http://tympanus.net/Tutorials/ElegantAccordion/.
El caso es que lo que yo necesito es que el tamaño del acordeon, todo expandido, sea de 900px, es decir, que no supere ese ancho, cosa que este ejemplo hace.
Copio ahora el código de jquery y comento lo que se me ocurrió:

Código:

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

Se me ocurre la siguiente solución, sobre el papel sencilla, pero que no consigo programar: empezar con la primera pestaña ya abierta, y el resto cerrada, y al hacer hover sobre el <li>, hacer la que esta desplegada pequeña(o todas las pestañas), y ampliar la pestaña sobre la que ya estoy.
Muchas gracias por la atención y espero poder a partir de ahora, ya que este es mi primer mensaje, colaborar para ayudar a cualquiera que lo necesite.

Un saludo

[abraiante]

Acabo de hacer la siguiente corrección en el código:

Código:

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
			$this.siblings().stop().animate({'width':'115px'},1000);
			$('.heading',$this.siblings()).stop(true,true).fadeIn();
            $('.description',$this.siblings()).stop(true,true).fadeOut(500);
            $('.bgDescription',$this.siblings()).stop(true,true).slideUp(700);
			$this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            //var $this = $(this);
            //$this.stop().animate({'width':'115px'},1000);
            //$('.heading',$this).stop(true,true).fadeIn();
            //$('.description',$this).stop(true,true).fadeOut(500);
            //$('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

Antes de hacer más grande el li correspondiente, hago los otros más pequeños. pero no funciona. Se siguen admitiendo ideas

[caricatos]

Tema movido desde javascript

[abraiante]

Caricatos, perdona por equivocarme de sitio. No volverá a pasar