In Tutorials Apr 17, 200842
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.
42 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.
Jun 6, 2008
@Ankur
Not to toot my own horn twice in the same thread, but the script used on kriesi.at is actually from here: http://jeremymartin.name/projects.php?project=kwicks
… which would explain the different Opera experiences…
Regarding the Opera bug though… I experienced a similar issue with Safari 3.1.1, which could be resolved by running the plugin after the document.onload, rather than the jquery.ready()… has anyone tried that yet?
Jun 18, 2008
This code is great, but I’m running into a problem - the right-most accordion will not disappear in FireFox 2.0+. Currently, I’m solely using 2 Accordions, and the behavior works fine for the left-most accordion when selected or deselected, but the right most does not. when the right most accordion is selected it appears as it should, but when deselected, it scrolls to the right, but the content does not disappear. It is not ‘there’, that is to say it’s not selectable, but it is in view. The content within my accordions are IFRAME’s that draw another page of content. I did this because in it’s implementation, there is a great deal of text that we want to place in these locations, however we do not have the vertical realestate. Again, in IE, the code works masterfully, but in firefox, the right-most Accordion’s content does not disappear when it is deselected. I’ve played with the code a bit to see if I would be able to correct this myself, to no avail. Any suggestions? This is by far the best solution I’ve found, and would hate to abandon the horizontal accordion element because the content IFRAME would not disappear…
Jun 19, 2008
Jim,
So does it work for you without using the iframe? Just trying to narrow down the possible causes.
Jun 19, 2008
Yes, it works with simple text in Firefox. In an attempt to work around the issue, I tried to us an overflow:auto in a div, and that was a failure as well. I’d love it to be effective with an IFRAME, but now i need to make my layout work without the IFRAME…
Jun 19, 2008
I found a very suitable work-around. While it does cause me to duplicate code both inline and in the external page, the Dyn-Web DIV Scroller:
http://www.dyn-web.com/code/scroll/
Does perfect both the horizontal scrolling and the vertical content scrolling within them.
Hope it’s useful…
Jul 8, 2008
This is great thank you.
I am getting the following javascript error:
‘handler has no properties’
I couldn’t work out from George Bridgeman’s comment exactly what I need to change to fix this. Can anybody offer any advice to solve this problem please?
Many thanks
Rich
Jul 10, 2008
Nice one, indeed. However, you have errors in your HTML and it’s not good to show/give people erroneous code. The most obvious errors are that you are putting block-level elements (e.g. paragraphs) inside an anchor element which is an inline element and can’t contain block elements.
Jul 31, 2008
great stuff , i m going to use right now at my popular news site hamropalo.com
Aug 4, 2008
I cant get it to open a initial box. The ID is correctly set. If I make it #a1 { width: 200px !important } it applies a height, but then never shrinks down. If I make it #a1 { width: 200px }, nothing happens on load.
Aug 8, 2008
Fixed the #a1 problem by simply adding style=”width: 100px” to the element I wanted open when the page started.
Aug 8, 2008
How do you use more than one of these on a page?
Aug 13, 2008
Realy nice,
but IE shows this erron in tray “guid is null or not an object ” … ? Does enybody know how to fix it..
And it is not HTML valid code… element p cant be within element a … how to fix this…
Thanks
JxK
Aug 15, 2008
Howdy,
Thanks for the great jquery plug-in. I used it on the home page of this site: http://www.daviscompany.com
Aug 18, 2008
IT’s GREAT SIMPLE ONE !
but I’ve a problem when I put large image in the paragraph , the lastblock shifts to the right and not shrinking !!
here’s a screen shot :
http://img129.imageshack.us/my.php?image=jqueryeq5.jpg
Aug 18, 2008
@Aaren,
u should change the a1 here : lastBlock = $(”#a1″);
to the id of ur other menu, for example :
lastBlock = $(”#menu2_a1″);
and change the ul here : $(”ul li a”).click(
to the id of other menu ul, for example ;
$(”menu2 ul li a”).click(
Aug 18, 2008
Here’s a link for the problem :
http://www.hdeya.com/other/duettographics.com/
Aug 18, 2008
Great web site!
I’m having the same problem as JxK with IE. I get an error, E shows “guid is null or not an object”.
I’m using jQuery 1.2.6
Any thoughts?
Aug 22, 2008
I’ve followed this perfectly, copied this code for code, and still can’t get the #a1 to stay open on page load. Any ideas?
Aug 22, 2008
Problem Solved CORRECTLY this time:
I was doing this:
#a1 { width: 274px }
When my css needed to be this:
ul li a#a1 { width: 274px; }
Aug 23, 2008
For the IE “guid” problem, you need to fix your function thus:
$("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;
}, function() {
// empty function for 'hover-out' to prevent errors in IE
});
Also, I get a kind of ‘blip’ using this technique — the item that is going from small to large seems OK, but the item going from large to small seems to sometimes decrease in size a fraction more than it should during the transition. Looks very strange. Anyone else notice this?
Aug 26, 2008
this is so cool ! i had to add a position:absolute though for it to work well in IE6.
Leave a Comment