There is no CSS required for this plugin to work. The only CSS I recommend is setting the collapsible elements to ‘display: none’. This will keep the browser from rendering them initially causing that jittery appearance when the page first loads for the user.

You can view the code below, with an example following:

HTML:

<div id="content-container">
	<!-- subsection of content container accordion 1 and 2 -->
	<div class="sub-content">
		<!-- Clickable headers (the actual anchor tags) that trigger the accordion -->
		<div class="accordion-headers">
			<a href="#" class="clickable-header-accordion-1">Click Me</a>
			<a href="#" class="clickable-header-accordion-2">Click Me</a>
		</div>
		<!-- Accordion 1 header shows/hides this group -->
		<ul class="collapsible accordion1-collapsibles">
			<li>First Accordion :: Item 1</li>
			<li>First Accordion :: Item 2</li>
			<li>First Accordion :: Item 3</li>
			<li>First Accordion :: Item 4</li>
		</ul>
		<!-- Accordion 2 header shows/hides this group -->
		<ul class="collapsible accordion2-collapsibles">
			<li>Second Accordion :: Item 1</li>
			<li>Second Accordion :: Item 2</li>
			<li>Second Accordion :: Item 3</li>
			<li>Second Accordion :: Item 4</li>
		</ul>
	</div>
	<!-- // -->

	<!-- next subsection of content container accordion 1 and 2 -->
	<div class="sub-content">
		<!-- Clickable headers (the actual anchor tags) that trigger the accordion -->
		<div class="accordion-headers">
			<a href="#" class="clickable-header-accordion-1">Click Me</a>
			<a href="#" class="clickable-header-accordion-2">Click Me</a>
		</div>
		<!-- Accordion 1 header shows/hides this group -->
		<ul class="collapsible accordion1-collapsibles">
			<li>First Accordion :: Item 1</li>
			<li>First Accordion :: Item 2</li>
			<li>First Accordion :: Item 3</li>
			<li>First Accordion :: Item 4</li>
		</ul>
		<!-- Accordion 2 header shows/hides this group -->
		<ul class="collapsible accordion2-collapsibles">
			<li>Second Accordion :: Item 1</li>
			<li>Second Accordion :: Item 2</li>
			<li>Second Accordion :: Item 3</li>
			<li>Second Accordion :: Item 4</li>
		</ul>
	</div>
	<!-- // -->
</div>

Again, please note: The CSS that is recommended is setting the collapsible elements to ‘disaply: none;’. Aside from that, there is no additional CSS required other than what is needed for your design.

jQuery and Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multi-accordion.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var accordions = [
		{
			'parent'      : '.sub-content',                  // parent element containing the clickable header and collapsible
			'header'      : '.clickable-header-accordion-1', // clickable header
			'collapsible' : '.accordion1-collapsibles'        // collapsible element
		},
		{
			'parent'      : '.sub-content',                      // parent element containing the clickable header and collapsible
			'header'      : '.clickable-header-accordion-2',     // clickable header
			'collapsible' : '.accordion2-collapsibles',          // collapsible element
			'afterclose'  : function() { alert('after close'); },// callback that is fired onced the accordion is closed
			'afteropen'   : function() { alert('after open'); }  // callback that is fired after the accordion is opened
		}
	];
	$().accordion(accordions);
});
</script>

Working Example:

You can view a working example at http://jjis.me/jquery.multi-accordion.html

Download the jQuery Multi-Accordion plugin

Internet Explorer post standard jQuery fadeIn() method

In searching for a solution, I stumbled across a rather simple removeFilter() method someone created. This worked nice, but it meant you had to do chaining or a callback in order for the fadeIn() to work and then have the filter removed so the fonts would smooth. I’m lazy and I like to do everything in a single method if I can. So, let combine the fadeIn/fadeOut methods in to a single method and add the filter removal as well.

(function($) {
	 $.fn.removeFilter = function() {
		if ($.browser.msie) {
			x = this.get(0)
			x.style.removeAttribute("filter");
		 }
	 }
})(jQuery);

(function($){
	 $.fn.fadeToggle = function(options) {
		  options  = typeof(options) != 'undefined'?options:'';
		  speed    = typeof(options.speed)!='undefined'?options.speed:'';
		  easing   = typeof(options.easing)!='undefined'?options.easing:'';
		  callback = typeof(options.callback)!='undefined'?options.callback:'';
		  callback = function(callback) {
			   $(this).removeFilter();
			   callback;
		  }

		  this.animate(
			   {opacity: 'toggle'},
			   speed,
			   easing,
			   callback
		  );
	 }
})(jQuery);

Use:

// normal speed
$('#objectId').fadeToggle();

// set fade in/out speed
$('#objectId').fadeToggle({ speed: 'fast' });

Internet Explorer post fadeToggle() method

Using removeFilter() method as a standalone method

There may instances where you just need to remove the filter. In that case, the following works:

// as callback within fadeIn() method
$('#objectId').fadeIn('fast', function() {
        $(this).removeFilter();
});

// simply remove the filer on a specific object or objects
$('#objectId').removeFilter();

Single List Mode: This is real simple. The user has a list of items to select from. When the select the item, the ‘selected’ class is added to that item. When they de-select the item, the ‘selected’ class is removed. This is tracked with a hidden input element with the id ‘ls_update_list_array’.

Dual List Mode: When the user views ‘Categories Selected’ (in this case, shown by default), they will see a list of categories currently selected. Under ‘All Available Categories’, they get a complete list of categories to selected from (in this case, minus those categories already selected). We want the user to be able to either add to the list of ‘Currently Selected’ by clicking on the ‘All Categories’ list, or remove items by clicking on them under ‘Currently Selected’. When they click on an item in either list, it is moved from list to the other. This is tracked with a hidden input element with the id ‘ls_update_list_array’.

ls_update_list_array: This is provided simply to allow for an easy form post action. Rather than having Javascript determine when the form is posted and then grabbing the list as an array and blah, blah, blah, you get the list automatically on post.

The HTML

<div id="tabs"><b class="active"><a href="#selected-categories">Currently Selected Categories</a></b><b class="inactive"><a href="#all-categories">All Available Categories</a></b></div>
<ul id="selected-categories" class="tab">
	<li id="item1" class="li-item selected">Item 1 text</li>
	<li id="item3" class="li-item selected">Item 3 text</li>
	<li id="item7" class="li-item selected">Item 7 text</li>
	<li id="item8" class="li-item selected">Item 8 text</li>
</ul>
<ul id="all-categories" class="tab">
	<li id="item1" class="li-item">Item 1 text</li>
	<li id="item2" class="li-item">Item 2 text</li>
	<li id="item3" class="li-item">Item 3 text</li>
	<li id="item4" class="li-item">Item 4 text</li>
	<li id="item5" class="li-item">Item 5 text</li>
	<li id="item6" class="li-item">Item 6 text</li>
	<li id="item7" class="li-item">Item 7 text</li>
	<li id="item8" class="li-item">Item 8 text</li>
</ul>

The CSS

You do not need to use this. You can use your own CSS.

#tabs { margin: 0 0 -2px 0; height: 45px; }
	#tabs b { display: block; float: left; margin: 0px; background: #fff; font-weight: normal; }
		#tabs b.active { background: #e0d3e3; }
		#tabs b.active a { color: #663366; }
		#tabs b.inactive a:hover { background: #f5edf6; }

	#tabs b a { display: block; color: #a989b0; padding: 10px; border: 1px solid #d3d3d3; text-decoration: none; }
	#tabs b a:hover { background: #f5edf6; }

.tab { clear: both; width: 100%; height: 250px; margin: 0; padding: 0!important; overflow: hidden; overflow-y: scroll; background: #fff; border: 1px solid #d3d3d3; }
	.tab li { font-weight: normal; padding: 10px!important; margin: 0!important; border-bottom: 1px dotted #d3d3d3; cursor: pointer; color: #663366; background-image: none!important; }
		.tab li:hover { background: #e0d3e3; }
	.tab li.selected { background: #956a99; color: #fff; }
		.tab li.selected:hover { background: #b592b8; color: #fff; }

The Javascript

bind events to the lists

Dual Lists Mode:

        if ( $('#selected-categories').length > 0 ) {
                ls.init({
                        variable      : '#selected-categories',  // the list that is updated to reflect user's selections
                        clickable     : 'li',                             // the element on which to bind the click event
                        update_list  : true,
                        constant     : '#all-categories'          // the list the user makes selections from
                });
        }

Single List Mode:

        if ( $('#selected-categories').length > 0 ) {
                ls.init({
                        variable      : '#selected-categories',  // the list that is updated to reflect user's selections
                        clickable     : 'li',                             // the element on which to bind the click event
                        update_list  : false
                });
        }

the code that makes it work

ls = {

	/* *************************************************************************
	*
	* start the initial binding of the list columns
	*
	************************************************************************* */
	init : function( params ) {

		var p = params;

		$(p._variable + " " + p._clickable).unbind('click');
		$(p._variable + " " + p._clickable).bind('click', function() {
			ls.move_left( p, $(this) );
		});

		if ( p._update_list ) {
			$(p._constant + " " + p._clickable).unbind('click');
			$(p._constant + " " + p._clickable).bind('click', function() {
				ls.move_right( p, $(this) );
			});
		}

		// update the list array field
		ls.track_selected_elements( p );

	},
	/* *************************************************************************
	* END :::
	************************************************************************* */

	/* *************************************************************************
	*
	* Moves selected element from the variable list to the constant list
	*
	************************************************************************* */
	move_left : function( p, obj ) {

		var p = p;

		if ( p._update_list ) {

			obj_id = $( obj ).attr('id');

			// this object exists in the other list
			// just remove it from existing list
			if ( $( p._constant ).find( '#' + obj_id ).length > 0 ) {
				obj.remove();
				$( p._constant ).find( '#' + obj_id ).removeClass('selected');

			} else {
				$(p._constant).append( obj );
				obj.removeClass( 'selected' );

				ls.sort_list( p, p._constant );
				obj.unbind('click');
				obj.bind('click', function() {
					ls.move_right( p, $(this) );
				});
			}

		} else {
			if ( obj.hasClass('selected') ) {
				obj.removeClass( 'selected' );
			} else {
				obj.addClass( 'selected' );
			}
		}

		// update the list array field
		ls.track_selected_elements( p );
	},
	/* *************************************************************************
	* END :::
	************************************************************************* */

	/* *************************************************************************
	*
	* Moves selected element from the contstant list to the variable list
	*
	************************************************************************* */
	move_right : function( p, obj ) {

		var p = p;

		obj_id = $( obj ).attr('id');

		// this object exists in the other list
		// just remove it from existing list
		if ( $( p._variable ).find( '#' + obj_id ).length > 0 ) {
			obj.remove();

		} else {
			$(p._variable).append( obj );
			obj.addClass( 'selected' );

			ls.sort_list( p, p._variable );
			obj.unbind('click');
			obj.bind('click', function() {
				ls.move_left( p, $(this) );
			});
		}

		// update the list array field
		ls.track_selected_elements( p );
	},
	/* *************************************************************************
	* END :::
	************************************************************************* */

	/* *************************************************************************
	*
	* When append to the list(s), the ordering is off. This alphabetically
	* sort the list items
	*
	************************************************************************* */
	sort_list : function ( p, obj ) {

		var parent = obj;

		var items = $(obj + ' ' + p._clickable).get();
		items.sort(function(a,b){
			var keyA = $(a).text();
			var keyB = $(b).text();

			if (keyA < keyB) return -1;
			if (keyA > keyB) return 1;
			return 0;
		});
			var ul = $(parent);
			$.each(items, function(i, li){
				ul.append(li);
			});
	},
	/* *************************************************************************
	* END :::
	************************************************************************* */

	/* *************************************************************************
	*
	* appends the list of selected LI elements in a hidden input box. will
	* allow you to get the values on form post without any jquery or javascript
	*
	************************************************************************* */
	track_selected_elements : function( p ) {
			var p = p;
			var ls_list_array = [];

			_class = ( p._update_list ) ? '' : '.selected';

			/* *******************************************
			* remove the old list to null it out        */
				$('#ls_update_list_array').remove();

			/* ******************************************
			* get the complete list of selected li's   */
				$(p._variable + ' li' + _class).each(function() { ls_list_array.push($(this).attr('id')) });

			/* *******************************************
			* append the array list as an hidden input  */
				var ls_input = '<input type="hidden"'
							+ 'id="ls_update_list_array" '
							+ 'name="ls_update_list_array" '
							+ 'value="' + ls_list_array + '" />'

				$(p._variable).append(ls_input)
	}
}

Dual List Example

• Item 1 text
• Item 3 text
• Item 7 text
• Item 8 text

• Item 2 text
• Item 4 text
• Item 5 text
• Item 6 text

Single List Eample

• Item 1 text
• Item 2 text
• Item 3 text
• Item 4 text
• Item 5 text
• Item 6 text
• Item 7 text
• Item 8 text

I’ve written a tabs script for jQuery that is short and to the point while still allowing for design flexibility and ease. There’s nothing to it. Simply establish the tabs settings with your appropriate IDs and classes and you’re good to go. I’ve used on a few occasions and it has yet to fail me.

As usual, however, let me know if you have problems. I’ve supplied complete code for HTML, CSS and, of course, the jQuery/JavaScript.

Let’s Start With The HTML

<div id="tabs">
	<b class="active"><a href="#selected-categories">Currently Selected Categories</a></b>
	<b class="inactive"><a href="#all-categories">All Available Categories</a></b>
</div>

<ul id="selected-categories" class="tab">
        <li id="item1" class="li-item">Item 1 text</li>
        <li id="item2" class="li-item">Item 3 text</li>
        <li id="item3" class="li-item">Item 7 text</li>
        <li id="item3" class="li-item">Item 8 text</li>
</ul>
<ul id="all-categories" class="tab">
        <li id="item1" class="li-item">Item 1 text</li>
        <li id="item2" class="li-item">Item 2 text</li>
        <li id="item3" class="li-item">Item 3 text</li>
        <li id="item3" class="li-item">Item 4 text</li>
        <li id="item1" class="li-item">Item 5 text</li>
        <li id="item2" class="li-item">Item 6 text</li>
        <li id="item3" class="li-item">Item 7 text</li>
        <li id="item3" class="li-item">Item 8 text</li>
</ul>

The CSS

/* *****
* tab header properties
***** */
#tabs { margin: 0 0 -2px 0; height: 45px; }
	#tabs b { display: block; float: left; margin: 0px; background: #fff; font-weight: normal; }
	#tabs b.active { background: #e0d3e3; }
		#tabs b a { display: block; color: #a989b0; padding: 10px; border: 1px solid #d3d3d3; text-decoration: none; }
		#tabs b a:hover { background: #f5edf6; }

		#tabs b.active a { color: #663366; }
		#tabs b.inactive a:hover { background: #f5edf6; }

/* *****
* tab content
***** */
.tab { clear: both; width: 100%; height: 250px; margin: 0; padding: 0; overflow: hidden; overflow-y: scroll; background: #fff; border: 1px solid #d3d3d3; }
	.tab li { font-weight: normal; padding: 10px; border-bottom: 1px dotted #d3d3d3; cursor: pointer; color: #663366; }
	.tab li:hover { background: #e0d3e3; }

The jQuery Code

/* *************************************************
*
* configuration: settings for class & ids of tab
* elements
************************************************* */
var tabs = {
	default_tab    : 0,                    // the # of the tab that should be shown on page load
	// the tab itself
	tab : {
		wrapper   : '#tabs',          // parent that wraps around each tab header
		container : 'b',                // the container that wraps around the clickable tab text
		clickable : 'a',                 // the clickable tab text
		_class     : {
			active   : 'active',   // class for the active tab
			inactive : 'inactive' // class for all inactive tabs
		}
	},
	// the content for each tab
	content : {
		_class  : '.tab'                 // class of the content for the tabs
	},

	/* *************************************************
	*
	* bind tabbing events
	*
	************************************************* */
	init : function() {
		$( tabs.tab.wrapper + ' ' + tabs.tab.clickable ).click(function() {
			var id 	= $(this).attr('href');
			var par 	= $(this).parent();

			// hide all tab content
			$.each( $( tabs.content._class ), function(i) {
				$( this ).css( 'display','none' );
			});

			// display the tab content chosen
			$( id ).css('display','block');

			// show the tab as clicked
			$.each( $( tabs.tab.wrapper + ' ' + tabs.tab.container ), function() {
				$( this ).removeClass( tabs.tab._class.active );
				$( this ).addClass( tabs.tab._class.inactive );
			});

			par.removeClass( tabs.tab._class.inactive );
			par.addClass( tabs.tab._class.active );

			return false;
		});

		// hide all tab content except the first tab
		$.each( $( tabs.content._class ), function(i) {
			if (i > tabs.default_tab) {
				$( this ).css('display','none');
			}
		});
	}

};

Now Initiate the Code

$(document).ready(function() {
        /* ************************************
        * only initiate the tab function if tabs are preset */
	        if ( $('#tabs').length > 0 ) {
		        tabs.init();
	        }
});

There you go. That’s all there is to it. The code is definitely portable and you could make it a plugin yourself if you wanted. I will get it setup to allow multiple sets of tabs per page and update when it’s completed.

Example

• Item 1 text
• Item 3 text
• Item 7 text
• Item 8 text

• Item 2 text
• Item 4 text
• Item 5 text
• Item 6 text

The problem with the standard accordion is that they require the child and header elements to be nested within a parent.

Example:

<div id="accordion-wrapper">
     <h1>Clickable Header 1</h1>
          <p>Collapsible child 1</p>
     <h1>Clickable Header 2</h1>
          <p>Collapsible child 2</p>
     <h1>Clickable Header 3</h1>
          <p>Collapsible child 3</p>
</div>

Where this limits us in our design is when we want to add some extra style to the accordion list. I tend to use lists when building a list. So, if we take the code above and wrap each header and collapsible child with an <li>, we would completely break the accordion.

Let’s break it down

The standard jQuery accordion would prohibit this because the layout would throw off the jQuery plugin. The plugins look at the wrapping element (in this case “accordion-wrapper”). It then finds all header (<h1>) elements and binds the click event. This click event finds the first occurrence of the collapsible element (<p>) and will either expand or collapse it depending on it’s current state.

Let’s fix this

With the following script, you simply specify what the header class is going to be and what the collapsible class is going to be. What this allows us to do is place our accordion headers and collapsible elements within structured list, thus allowing more design/layout freedom.

Example:

<ul id="accordion-list">
	<li class="accordion-item">
		<h1 class="accordion-header">Clickable Header 1</h1>
		<p>Just placed here for an example of how we don't have our header and collapsible elements stacked</p>
			<ul class="accordion-collapsible">
				<li>Collapsible child 1</li>
				<li>Collapsible child 2</li>
				<li>Collapsible child 3</li>
				<li>Collapsible child 4</li>
			</ul>
	</li>
	<li class="accordion-item">
		<h1 class="accordion-header">Clickable Header 2</h1>
		<p>Just placed here for an example of how we don't have our header and collapsible elements stacked</p>
			<ul class="accordion-collapsible">
				<li>Collapsible child 1</li>
				<li>Collapsible child 2</li>
				<li>Collapsible child 3</li>
				<li>Collapsible child 4</li>
			</ul>
	</li>
	<li class="accordion-item">
		<h1 class="accordion-header">Clickable Header 3</h1>
		<p>Just placed here for an example of how we don't have our header and collapsible elements stacked</p>
			<ul class="accordion-collapsible">
				<li>Collapsible child 1</li>
				<li>Collapsible child 2</li>
				<li>Collapsible child 3</li>
				<li>Collapsible child 4</li>
			</ul>
	</li>
</ul>

The jQuery Code:

$(document).ready(function() {
	/* ***
	* REQUIRED
	* set you classes accordingly below. */
	var accordion = {
		parent      : '.accordion-item',        // parent element containing the clickable header and collapsible
		header      : '.accordion-header',      // clickable header
		collapsible : '.accordion-collapsible'  // collapsible element
	};

	/* ***
	* hide all collapsible items */
	$(accordion.collapsible).css('display','none');

	/* ****
	* bind the accordion header click event */
	$(accordion.header).unbind('click');
	$(accordion.header).bind('click', function() {
		var header_obj      = $(this);          // The current header
		var next_parent_obj = $(this).parent(); // The parent of the header

		var content_obj = $(this).siblings(accordion.collapsible); // find the collapsible element

		if(content_obj.is(":hidden")) {
			// collapse all collapsible elements
			next_parent_obj.siblings(accordion.parent).each(function() {
				$(this).children(accordion.collapsible).slideUp('fast');
			});
			// show the content of the clicked header
			content_obj.slideDown('fast');
		} else {
			content_obj.slideUp('fast');
		}
	});
});

Seeing it in action

• Clickable Header 1

  Just placed here for an example of how we don’t have our header and collapsible elements stacked

  • Collapsible child 1
  • Collapsible child 2
  • Collapsible child 3
  • Collapsible child 4

• Clickable Header 2

  Just placed here for an example of how we don’t have our header and collapsible elements stacked

  • Collapsible child 1
  • Collapsible child 2
  • Collapsible child 3
  • Collapsible child 4

• Clickable Header 3

  Just placed here for an example of how we don’t have our header and collapsible elements stacked

  • Collapsible child 1
  • Collapsible child 2
  • Collapsible child 3
  • Collapsible child 4

The function can be called from anywhere and the files are specified in an array

/* *********************************************************
*
* 	Setup a global config variable that
* 	stores all sitewide values such root
* 	url, absolute paths, Javascript library paths, etc.
*
********************************************************* */
	var config;
	config = {
		   URL : 'http://domain.com',
		   jsURL: "http://domain.com/js"
	};

/* **********************************************************************************************************
*
*	Function for looping through long lists of JS includes this function, when fed an array will
*	write the script tag to include the specified files as JS include files.
*
*	NOTE: This written to look in the 'js' folder under the site's root folder (http://domain.com/js/)
*
*	Directions:
*	config.loadComponents( { foldername:['filename.js'] } );
*
*	Example:
*	config.loadComponents( { jquery:['jquery-ui'] } );
*	OUTPUT: <script src='http://domain.com/js/jquery/jquery-ui.js' type='text/javascript'></script>
*
********************************************************************************************************** */
config.loadComponents = function (components) {
	for ( var key in components ) {
		var obj = components[key];
		for (var prop in obj) {
			var file = obj[prop];
			file = config.jsURL + '/' + key + "/" + file;
			document.write(unescape("%3Cscript src='" + file + "' type='text/javascript'%3E%3C/script%3E"));
		}
	}
}

/* *********************************************************
*
*	Call the loadComponents() function
*	pay attention to how folder and file are called
*		folder: ['filename1.js', 'filename2.js']
*
********************************************************* */
config.loadComponents( {
	jquery:[
		'jquery-1.3.2.min.js',
		'jquery.easing.1.3.js',
	],
	app:[
		'app.js',
	],
	scripts:[
		'facbox.js'
	]
});

It will look for any input element with the class “input” (or whatever you specify) and use the element’s maxlength attribute as the value to count against and update the “fieldName-counter” element.

This is a very useful script for those occasions when you want to limit the character entry for an input field.

<!-- input and character count element -->
    <span id="fieldName-counter">100</span> characters remaining<br />
    <input type="text" name="fieldName" id="fieldName" maxlength="100" class="input" />
<!--/elements-->

<script type="text/javascript">
$(document).ready(function() {
    // change .input to desired class
    $('.input').each(function() {
        var inp = $(this);
        var maxlen =inp.attr('maxlength');
        if (maxlen &gt; 0) {
            inp.bind('keyup', function(e) {
                len = new Number(inp.val().length);
                counter = maxlen-len;
                counterObj = '#' + inp.attr('id') + '-counter';
                $(counterObj).text(counter);
            });
        }
    });
});
</script>