In my first jQuery UI article, we discussed the Interaction element of the functionality, drag and drops, resizing and sorting. In part 2 I will discuss the Widget elements that can be used with jQuery UI, these can be seen as custom controls to all you .net people out there. I’ve tried to go a bit deeper this time round, giving you home grown examples of usage in addition to the jQuery examples, as well as giving you jQuery-only alternatives. Let’s take a look…
Accordion
I love this widget. It’s a great tool to show and hide chunks of data within a page, with the added awesomeness of animations. As long as you mark up your HTML correctly, implementation is really simple. The example above uses:
$("#accordion").accordion({
header: "h3"
});
Beyond this, you are able to assign events to this, for example when an element is opened or closed using change:.
Alternatives: There is also a jQuery plugin, again called Accordion created by Jörn Zaefferer. It’s arguably easier to implement, does exactly the same, and you can customize as much as you want. Implementation can be as easy as:
jQuery('#list1a').accordion();
