jQuery Accordian without plug-ins & with a bit of design freedom

Posted by jj_jiles on Jun 13, 2010 in jQuery & Javascript | 1 comment

So you have a design and you have decided you want to use a jQuery accordion. You start to layout your design and implement the accordion only to find out that your design is going to cause problems with the standard accordion plug-ins.

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