jQuery UI Multiple Sections Open Accordion

This plugin is Deprecated!

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

	<div id="multiAccordion">
	<h3><a href="#">tab 1</a></h3>
	<div>
	Lorem ipsum dolor sit amet
	</div>
	<h3><a href="#">tab 2</a></h3>
	<div>
	Lorem ipsum dolor sit amet
	</div>
	<h3><a href="#">tab 3</a></h3>
	<div>
	Lorem ipsum dolor sit amet
	</div>
	<h3><a href="#">tab 4</a></h3>
	<div>
	Lorem ipsum dolor sit amet
	</div>
	</div>

view raw
jQuery-multi-open-accordion.html
hosted with ❤ by GitHub

Script

	$(function(){
	$('#multiAccordion').multiAccordion();
	});

view raw
jQuery-multi-open-accordion.js
hosted with ❤ by GitHub

UPDATE:

	$(function(){
	// this will make the second tab by default opened (index starts from 0)
	$('#multiAccordion').multiAccordion({active: 1 });
	// [ OR ]
	// supports multiple tabs to be opened by default
	$('#multiAccordion').multiAccordion({active: [1, 2, 3] });
	// show all tabs
	$('#multiAccordion').multiAccordion({active: 'all' });
	// hide all tabs
	$('#multiAccordion').multiAccordion({active: 'none' });
	// you can set the options as any jQuery UI plugin using option method
	$('#multiAccordion').multiAccordion('option', 'active', 'all');
	});

view raw
jQuery-multi-open-accordion.js
hosted with ❤ by GitHub

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

	/* fired when any tab is clicked, ui here hold clicked tab and its content
	* ui['tab'] // current tab
	* ui['content'] // current tab content (div)
	*/
	click: function(event, ui) {}
	// when accordion is initialized, ui here holds a jQuery object to the whole accordion
	init: function(event, ui) {}
	// when tab is shown, ui here hold the same as in click event above
	tabShown: function(event, ui) {}
	// when tab is hidden, ui here hold the same as in click event above
	tabHidden: function(event, ui) {}
	// How can you bind these events ?
	// 1. at plugin initialization
	$('#multiAccordion').multiAccordion({
	active: 'all',
	click: function(event, ui) {
	alert('tab is clicked!');
	}
	});
	// 2. after initialization
	$('#multiAccordion').multiAccordion('multiAccordionclick', function(){
	alert('also clicked');
	});

view raw
jQuery-multi-open-accordion.js
hosted with ❤ by GitHub

Methods

	// destroying the plugin and removing all handlers, and styles
	$('#multiAccordion').multiAccordion('destroy');
	// get an array of active tabs, if no active tabs it will return a one element array with [-1] value
	$('#multiAccordion').multiAccordion('getActiveTabs');
	// you can use the previous method to get active tabs value, then you can set it later simply by
	// retrieve
	var activeTabs = $('#multiAccordion').multiAccordion('getActiveTabs');
	// set
	$('#multiAccordion').multiAccordion('option', 'active', activeTabs);

view raw
jQuery-multi-open-accordion.js
hosted with ❤ by GitHub

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