In Tutorials Apr 17, 200821
jQuery Examples - Horizontal Accordion
Up until now I have always used Scriptaculous / Prototype for any Java Script animation and effects, but lately I’ve heard a lot of good things about jQuery. So, I thought I would give it a try, and start doing some experiments.
In this example, I have created an accordion effect that reveals a caption for each thumbnail. I’ve done similar navigations like this in flash, so I wanted to see how it compared to doing it with jQuery.
In order to use jQuery in your pages you first need to download the latest release and then include the Java Script library within your head tags.
<script src="javascript/jquery-1.2.3.js"
type="text/javascript"></script>
Now lets take a look at the html for this example. I gave the first anchor tag an id, so that we could set an initial width and make it appear expanded when the page is loaded.
<ul>
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>
Here is the CSS, which is pretty straight forward. The main thing to note is the fixed height being set on the anchor tag. Doing this along with “overflow: hidden” prevents the contained p tag from dropping down below the thumbnail.
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
#a1{
width: 210px;
}
ul li img{
position: absolute;
border: 3px solid #881212;
}
ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
And here is the jQuery script that makes it all happen. This can be placed in the head tag. The first thing we do is set a few initial variables: lastBlock represents the block that is already expanded, maxWidth is the width we want our block to be when it is expanded, and minWidth is the width when it is not expanded.
Then we simply set a hover event on all anchor tag contained within all list items. Within the hover event we make two calls of the animate() function: one to close the lastBlock, and another to expand the block we are hovering. Then we set lastBlock equal to the block we just expanded. That way jQuery will know which one to close the next time the hover event is fired. The animate() function allows you to create custom animations by setting new values for multiple properties. In this case we are only animating the width.
One important thing to note is setting “queue” to false. If it is set to true, every hover event is stored and will be animated one after another, resulting in opening and closing long after the last hover happens.
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
For more info on the animate() function and other jQuery goodness, check out the official documentation.
21 Comments
Apr 18, 2008
It all looks so simple when it’s laid out like this! Thanks a lot, I’ll be sure to implement this soon.
Apr 19, 2008
Hello webmaster…Man i love reading your blog, interesting posts ! it was a great Saturday .
Apr 25, 2008
thanks for the example
I’ll create one for my blog
Apr 25, 2008
You’re using an iframe to display it here. How would you use it on a page with other list elements. I suppose what I need to know is, how would you alter the javascript so that it only affects, say, a DIV titled “accordion”?
Apr 25, 2008
You are the MAN! I’ve searched high and low for how to do this. Thank you, thank you, thank you.
Apr 25, 2008
Dave,
No need to worry about the iframe, that is just how I chose to show the example within this post. The code snippets in this article don’t reference the iframe at all. So, if you follow this example it should work for what you are trying accomplish.
Apr 27, 2008
Why do i get this error:
handler has no properties
?
Apr 28, 2008
[…] jQuery Examples - Horizontal Accordion- An accordion effect that reveals a caption for each […]
Apr 29, 2008
Zulfikar,
I had the same error today with some other code, found this post and figured I’d post my solution.
You’ll get the ‘handler has no properties’ error if you’re setting up a hover event and don’t pass one of the arguments. If you don’t have code to fire when the cursor leaves an element, you must pass an empty function or you’ll get this error.
As an example, you can’t do this (sorry if formatting goes belly up):
$(’a').hover(function() {
doSomething();
});
You have to do this instead:
$(’a').hover(function() {
doSomething();
}, function() {
// nothing to see here.
});
That fixed it for me, anyhoo. Hope this helps!
George.
Apr 29, 2008
Might have to use in my new project! thanks alot
Apr 29, 2008
Doesn’t seem to work in Opera 9.27 on XP…anybody else seeing that?
Apr 29, 2008
Awesome example!
Apr 29, 2008
Nice script - certainly impressive for a first stab at jQuery!
I recently worked on a similar project and found that “jitter” effect to be difficult to get rid of. If you’d like to examine my approach to the problem (which ultimately came out pretty jitter free), you can check it out here: http://www.jeremymartin.name/projects.php?project=kwicks
Feel free to rip any code you like!
Apr 29, 2008
Check this website: http://www.kriesi.at/
It is using the same script.
Also check my website and let me know how it is
http://www.redesignyourbiz.com
I also have some beautiful wallpapers and ecards on my website… check them out.
Thanks
Apr 29, 2008
the apple website uses that script in downloads page ;)!
Apr 29, 2008
Does not work in Opera 9.27
Apr 29, 2008
Based on comments from “RedesignYourBiz.com” above the same script is used in http://www.kriesi.at/ and when I visit that site the acordian works just fine. Not in this site though?
Apr 30, 2008
Does anyone have a solution for the Opera issue?
May 2, 2008
Junkie234,
That is strange behavior in Opera. When I get a free moment, I’ll check it out.
May 7, 2008
Doesn’t work in Opera 9.50beta (xp)
They just kinda shudder a bit, and the text flows off bottom.
=(
May 9, 2008
Ah cool. Very useful. Thanks for the snippets.
Leave a Comment