I’ll code 4 Food

Hoy liberare un plugin creado para la libreria javascript jquery para crear menus acordeon de varios niveles (testeado de momento con 2 niveles), lo unico que hace falta es que se siga la estructura que relatare a continuacion para que cuando evalue las expresiones de xpath para poder vincular los eventos a los elementos adecuados, no se si le servira a alguien pero de momento yo lo he usado en 2 paginas web ya.

/**
* Accordion plugin based in jquery javascript library
* Necessary structure to make this accordion work
* <ul>
*   <li>
*    <h4<Menu item</h4>
*    <ul>
*     <li>Submenu item</li>
*    </ul>
*   </li>
*   <li>
*    <h4>Menu item</h4>
*    <ul>
*     <li>Submenu item</li>
*    </ul>
*   </li>
* </ul>
**/
(function($) {
$.fn.Accordion = function(settings){
contBox = this;
settings = $.extend({}, arguments.callee.defaults, settings);
/* send settings to each function */
$(this).each(function(){
tSettings = settings;
});
$(this).find(" h4")
.parent()
.addClass("collapsed")
$(this).find(" li h4")
.css("cursor","pointer")
.bind(settings.event,toggleElements);
return this;
};
function toggleElements(event){
/* Inside click event ! */
var speed = tSettings.speed;
if( $(this).parent().attr("class") != "expanded"){
$(this).parent().parent().find(" li.expanded")
.addClass("collapsed")
.removeClass("expanded")
.find(" ul:first")
.slideToggle(speed);
$(this).parent()
.addClass('expanded')
.removeClass('collapsed')
.find(" ul:first")
.slideToggle(speed);
}else{
$(this).parent()
.addClass("collapsed")
.removeClass("expanded")
.find(" ul:first")
.slideToggle(speed);
};
};
$.fn.Accordion.defaults = {
delay: 250,
event: "click",
speed: 500
};
})(jQuery);

Para utilizarlo despues buscamos el elemento que queremos convertir en menu y le decimos que es un nuevo objeto Accordion como en el siguiente ejemplo :

$(document).ready(function(){
$("#menu ul").Accordion();
});

Hasta otra \m/