jQuery.entwine introductory tutorial Next >>

Welcome to the jQuery.entwine introductory tutorial. We're going to work through several iterations of a piece of jQuery.entwine code to get the animating accordion menu below. Although this accordion could easily be achieved using regular jQuery, the API to this accordion is much nicer than a standard jQuery plugin. The code (in it's entirety) attached to each of the buttons on the right is: 


Expand all: $("ul li").expand();
Collapse all: $("ul li").collapse();

Make horizontal: $("ul").addClass("horizontal");
Make vertical: $("ul").removeClass("horizontal");

I Like Pink: $("ul li").setHighlight("#ecd");
Man's Man: $("ul li").setHighlight("#ced");

Despite this, the actual accordion code itself is clean, self explanatory, easily extensible (even by third parties) and can be made non-namespace polluting.