Lifesize Design » CSS http://lifesizedesign.net/wordpress Web and Graphic Design Thu, 21 Oct 2010 22:38:52 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Custom jQuery accordion tutorial http://lifesizedesign.net/wordpress/custom-jquery-accordion-tutorial/ http://lifesizedesign.net/wordpress/custom-jquery-accordion-tutorial/#comments Wed, 03 Mar 2010 19:43:33 +0000 Andrew http://lifesizedesign.net/wordpress/?p=10 Ah, the much loved but often over used accordion. It has its time and place but we need to be sure we are actually facilitating the content or design and not just using it as a spiffy animation. When the content says “hey there, I’m an accordion” by all means use it. But, regardless of your need, or lack there of, for an accordion, a lot can be learned about jQuery from building one from the ground up. This time around, we’ll be taking advantage of jQuery’s animation and event functions. So let’s dive right in.

Please note: This tutorial assumes basic knowledge of HTML, CSS, and basic jQuery usage and syntax.

View the demo.

So as you can see from the demo, we are going to  be coding up your standard accordion. Nothing too amazing there but in addition to that we’ll be spicing it up a bit. Using jQuery’s .css( ) function, it is easy to add icons to indicate that the item is expandable and collapsible. This adds a bit of style but also increases the user experience. It’s important that if we are going to add functionality to our site we need to let the user know that the functionality is there.

Go ahead and create your project folder and a new file called index.html. We’ll add in the basic page structure, include our CSS, and link to jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="main.css"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
		<title>Custom jQuery accordion demo</title>
	</head>
	<body>
	<div id="wrapper">
		<div id="header">
			<h1>Custom jQuery accordion demo</h1>
		</div>
		<div id="content">
			...
		</div>
	</div>
	</body>
</html>

You might have noticed we are linking to Google’s hosted AJAX libraries. There are many advantages to this but we won’t get into them now (if you are really curious check out this post). For now just consider it “best practice”.

We can now move on to our accordion markup which we will be placing inside the #content DIV.

<div class="itemWrapper">
	<h3 class="itemTitle">Item One</h3>
	<p class="itemDesc">Lorem ipsum...</p>
</div>

As you can see, it’s a simple <div> wrapper with a header and paragraph with appropriate CSS classes. We will be using these classes to manipulate the content with jQuery and change its CSS on the fly.

Now, let’s take a look at our jQuery.

function accordionList(){
	//we will use jQuery to hide the objects so if javascript is disabled the content is still displayed
	$('p.itemDesc').hide();
	$('.itemWrapper').css('background',"url('img/icon_symbolPlus.png') no-repeat top right");
	$('.itemWrapper').click(
		function(){
			//set the p element to a variable for referencing
			var nextItem = $(this).children('p');
			//check to see if we are clicking on an already expanded item
			if((nextItem.is('p')) && (nextItem.is(':visible'))) {
				//remove the following 2 lines and just return false for a non-toggling accordion
				nextItem.slideUp('normal');
				$(this).css('background',"url('img/icon_symbolPlus.png') no-repeat top right");
				return false;
			}
			//check to see if we are clicking on a hiden item
			if((nextItem.is('p')) && (!nextItem.is(':visible'))) {
				//colapse the item and change the icon
				$('.itemWrapper p:visible').slideUp('normal');
				$('.itemWrapper p:visible').parents('.itemWrapper').css('background',"url('img/icon_symbolPlus.png') no-repeat top right");
				//expand the clicked item and change the icon
				nextItem.slideDown('normal');
				$(this).css('background',"url('img/icon_symbolMinus.png') no-repeat top right");
				return false;
			}
		}
	);
}

$(document).ready(function(){
	accordionList();
});

So basically, what we are doing is creating a function called accoridonList( ) and calling that function when the document is ready.

Let us take a closer look at accordionList( ).

$('p.itemDesc').hide();
$('.itemWrapper').css('background',"url('img/icon_symbolPlus.png') no-repeat top right");

You can see the first thing we do is use jQuery to hide our P elements with the class of “itemDesc”. The point in doing it this way, as opposed to initially hiding the content applying the icon via CSS, is if a user has javascript disabled the content will still be displayed appropriately, allowing for graceful degradation. We next move on to handling the .click( ) event.

$('.itemWrapper').click(
	function(){
		...
	}
);

Here we are saying, when the element with the class “itemWrapper” is clicked do something. Since we are not clicking on the element we want to affect we will make a pointer to it for easy reference.

var nextItem = $(this).children('p');

This will create a variable called “nextItem”. This references the P element that is a child of our clicked upon element. In this case we are clicking on the wrapping DIV.

Next we create a conditional statement which checks to see if the .itemWrapper we are clicking on has been expanded and is visible.

if((nextItem.is('p')) && (nextItem.is(':visible'))) {
	//remove the following 2 lines and just return false for a non-toggling accordion
	nextItem.slideUp('normal');
	$(this).css('background',"url('img/icon_symbolPlus.png') no-repeat top right");
	return false;
}

First we are asking if our pointer is referencing our P element. Then we checking to see if that element is visible. If it is we tell jQuery to collapse “nextItem” and change the wrappers background image to reflect that.

Our next if statement has a bit more to it. As you can see in the demo we are creating an accordion that will only allow one item to be open at a time. So we need to not only expand the clicked wrapper and change its icon but also find the expanded wrapper, collapse it, and change its icon to reflect that.

if((nextItem.is('p')) && (!nextItem.is(':visible'))) {
	//colapse the item and change the icon
	$('.itemWrapper p:visible').slideUp('normal');
	$('.itemWrapper p:visible').parents('.itemWrapper').css('background',"url('img/icon_symbolPlus.png') no-repeat top right");
	//expand the clicked item and change the icon
	nextItem.slideDown('normal');
	$(this).css('background',"url('img/icon_symbolMinus.png') no-repeat top right");
	return false;
}

Here, like before, we check to see if we are referencing our desired P element. But this time around we are asking if it is not visible to do something. First it finds the currently visible paragraph, if there is one, and hides it then changes the icon back to a plus symbol. The last thing to do is expand our clicked wrapper and change its icon to a minus symbol.

The final call to our function we just created.

$(document).ready(function(){
	accordionList();
});

So that about wraps it up. The call to our accordionList( ) function will apply the animation effects to the .itemWrapper DIVs.

As for our CSS, it will provide basic styling and doesn’t need to be covered here.

If you have any questions leave a comment below. I hope you enjoyed the Custon jQuery Accordion tutorial. If there are any other web design and development tutorials you would like to see let me know in the comments.

Andrew Cline is a freelance web developer and designer in Portland, Oregon

]]> http://lifesizedesign.net/wordpress/custom-jquery-accordion-tutorial/feed/ 0