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

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

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>