jQuery UI Multiple Sections Open Accordion

Last Update: 22-Jul-2011
Today when I was building a web application interface, I was trying to use jQuery UI Accordion, but I didn’t want it to open one tab at a time, I just wanted each accordion tab to toggle between open and close states while pressing it, so I can have more than one tab opened,  what I wanted was not a feature of  jQuery UI’s Accordion, so I tried to look up over the internet if I can find any suitable solution, but could not find anything, so I decided to make the plugin myself,
it works the same way original jQuery UI Accordion do, below you can find the markup and script required to run this plugin,also you can download a working example along with the plugin from my google code profile

Markup

Script

UPDATE:

you have the option to choose which tabs by default will be opened by passing either a number or array of desired open tabs to active option as follows:

UPDATE:

Events

Methods

v.1.5: change log

• using jQuery UI widget framework
• fixed: browser goes to the top on tab click
• fixed: events binding repeated when calling plugin more than once
• enhancement: adding click, tabShown, tabHidden, and init event bindings
• enhancement: adding show all & hide all tabs

you can download the source file and an example from google code here

also you are welcome to make any contribution

follow me on:

awesome icons by WPZOOM

jQuery Selectors Watch-out!

You might be tempted to extend jQuery selectors and implement a set of your own custom selectors as I did, first I have to admit that it’s a very powerful feature of jQuery that enabled me to separate some of the UI-related logic into a separate JS file, but after defining over 15 custom selectors, I have reached to a weird situation…

before telling what was the poblem, let me give you a brief about what I was trying to do;

I have a set of divs, each div contains some data related to some people (name, age, marital status, …etc), and I have defined some custom selectors using jQuery to simplify filtering these people like :ageRange(min, max) will selects all people within a specific age range.

Till now everything is working perfectly, but when I tried to implement a custom selector that selects people depending on their last visit :lastVisit(min, max) something went wrong!

my custom selector is not being called!

After a couple of hours of debugging trying to find out where things have gone wrong, I have reached to the following conclusion:

using :lastVisit(min, max) was interfering with every jQuery built-in selector that has a :last prefix,
it seems that jQuery checks for the begging of every selector name and not the whole name,
so watch out to define your custom selector starting with jQuery’s built-in selector names like :last, :has, :not ... etc

you can check the whole list of jQuery’s built-in selectors here

follow me on:

awesome icons by WPZOOM

jQuery UI selectToUISlider event binding issue

I have been using selectToUISlider jQuery UI plugin from Filament group with jQuery v 1.4.3 and jQuery-UI v 1.8.5, which is a very excellent plugin that makes jQuery UI Slider more powerful and easier to use,
In my case, I have 2 combo boxes select elements both has the same options, and I was using this plugin to transform them into a range slider, the plugin seem to be working very well, when I move the slider, the combo box values are changing, but when I tried to bind this slider to a slide or stop events, nothing gets triggered! the values of the select elements are changing but no event is triggered back!

I have looked at the posts on their website , it seems to be a common problem, Filament group said that it extend jQuery’s UI slider events and using slide or stop events should do the job, but for some reason the event is not triggered.

I have digged down into their code trying to make things work, and here’s the workaround that I’v done:

first I bind a change event to the select boxes inside my page:

$('select').change(function(){
     // handle changed values
});

in the selectToUISlider.jQuery.js go to the slide event and add the slider’s stop callback function right after the slide callback as follows:

slide: function(e, ui) {//slide function
	...
},
stop: function(e, ui) { // handle stop sliding event
	var thisHandle = jQuery(ui.handle);
	var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
	// trigger back any change function
	currSelect.change();
},

what we have done here in the stop function:
first we took the handler object which has the same ID of our select object with a handle_ prefix, so we extracted the select ID and then triggered the change function to indicate that some values has changed here
, so whenever the user stops sliding this slider, the change event will be called back

hope this will help you as well

follow me on:

awesome icons by WPZOOM