In Tutorials Apr 17, 2008136
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.
136 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.
Aug 31, 2008
[...] Accordion Menu set my mind on fire. With a little CSS tweaking the possibilities are endless. [...]
Sep 2, 2008
This jQuery slider is just too good.
Sep 16, 2008
Example seems to have disappeared.
Oct 7, 2008
This effect is cool. thanks for the example.
Regards
Dimi
Oct 18, 2008
how can i download it ?
Nov 20, 2008
I love this effect. I did an entire Joomla portfolio site using it as the navigation interface: http://charlieleduff.com
Nov 20, 2008
First off, these lines:
lastBlock = $(“#a1″);
maxWidth = 210;
minWidth = 75;
Are all in the global scope. Use “var” to fix this. Second, you’ve got that “handler is not defined” error.
Dec 1, 2008
Hi, very cool menu, but what if I want to move the tabs on click instead of by hover?
thank you
Dec 2, 2008
Hi, great script, thanks for this!
However, I am having a few issues.
First, everything is loading open. How do I get them to load closed, and then only open when I hover over the image?
Second, in firefox, the accordian never loads properly when I open the page. I have to refresh it several times to get it to load all the way. And then, the last image on the right stays open, and I can’t close it unless I leave the page and hit the back button. After that the last image opens and closes properly.
Here’s the link: http://www.cbtemecula.com/test.php
I hope someone can help! Thank you!
Dec 2, 2008
Ok it seems I somehow fixed the 2nd problem, but I still can’t seem to get the page to load with all of them hidden. I have the first one on the left with the id=”a1″ which I thought would load the page with only the first item open, but they are all open until you hover over them.
http://www.cbtemecula.com/test.php
Dec 4, 2008
No one can help?
Dec 9, 2008
First of all, I found this to be a huge inspiration and resource. It also works smoothly and looks great!
However, I wish I could use the separate anchor tags as divs instead, so I can link to things from within them. Is there any way to do this? I kind of a noob when it comes to java of any kind, so any sort of help would be fantastic.
Other than that, I am deeply impressed!
Dec 9, 2008
Nevermind
Figured it out. Thanks.
Dec 9, 2008
Well I started from scratch and got it to work, not sure what I was doing wrong before. Looks awesome now. Check it out: http://www.cbtemecula.com/people.php
Thanks for this!
Jan 12, 2009
Nice trick !!
I just made a little improvement :
- add var before the 3 variables
- use mouseover function instead of hover. hover function generate an error.
Anyway thank you.
Jan 16, 2009
I’ve got everything working in IE7 & FF, but FF handles the animation less smoothly than in IE7. Are there any performance enhancements I could do with my code? Here ’tis: http://clients.developdaly.com/act/
Jan 29, 2009
This is really quite lovely. Thank you very much for this. I’ll be RSS-ing this website from now on.
Feb 2, 2009
Thank you very much. Works awesome!!!
Feb 13, 2009
Excellent accordion. Thanks to jquery and all contributors.
@Hiram: to get rid of the minor irritation of the first image (#a1) not loading quite to full size, and then expanding slightly (4px to be exact) on first mouseover, in CSS change:
ul li #a1{
width: 250px; float:left;
to
ul li #a1{
width: 254px; float:left;
I’m looking to utilise this on a website I’m building for a friend.
Mar 2, 2009
Hi! How can I add a text-link into every one of the tabs without collapse it? I’ve tried to do it, but it moves all the tabs and shows up wrong.
I must say that’s an awesome script!
Regards
Mar 4, 2009
Any ideas how this menu design canbe implemented in a drupal theme? Thanx in advance, if anyone answers
Apr 13, 2009
Oooooo I have been looking for this!!
Apr 27, 2009
[...] 2 – Design Reviver Horizontal Accordion Un de mes préférés. Lorsque vous passez la souris sur une image, il laisse voir la légende. Particulièrement adapté pour créer des animations “Featured posts” comme on en trouve sur la homepage de ce blog. Source [...]
May 14, 2009
Hi, i am going to implement it on one site, thanks very much and keep up the good work !
Walter
May 15, 2009
I want to put image in right side and text in left side on this accordion. how i can do this. could you help me
May 18, 2009
[...] Designreviver Horizontal Accordion | Demo [...]
May 19, 2009
[...] jQuery Examples – Horizontal Accordion [...]
May 19, 2009
[...] jQuery Examples – Horizontal Accordion [...]
May 20, 2009
[...] jQuery Examples – Horizontal Accordion [...]
May 20, 2009
[...] jQuery Examples – Horizontal Accordion [...]
May 21, 2009
[...] jQuery Examples – Horizontal Accordion [...]
May 23, 2009
[...] jQuery Examples – Horizontal Accordion [...]
May 24, 2009
Wooow aswome I love the concept
May 26, 2009
[...] jQuery Examples – Horizontal Accordion [...]
May 31, 2009
[...] Horizontal Accordion [...]
Jun 6, 2009
[...] Designreviver Horizontal Accordion Demo [...]
Jun 13, 2009
[...] Designreviver Horizontal Accordion | Demo [...]
Jun 14, 2009
[...] jQuery Examples – Horizontal Accordion [...]
Jun 30, 2009
[...] jQuery Examples – Horizontal Accordion [...]
Jul 3, 2009
Would it be possible to make it work as a page postback if javascript is turned off?
Can you give me some suggestions?
Thanks,
Cassandra
Jul 4, 2009
Great one!!
BUT its not working with IE7 but works with IE8 and Firefox..
PLS HELP ME to SOLVE this issue…
Jul 4, 2009
it doesnt seem working in IE7 ..Pls help me
Jul 4, 2009
its not working in Windows XP /IE7…
pLS HELP ME OUT….
Jul 11, 2009
[...] features. I linked to one jQuery tutorial in the last item, and Design Reviver has an article on horizontal accordion menus. If you find that these are the types of design features you’d like to add to your site, I [...]
Jul 12, 2009
I was just wondering how i would go about making this script’s overflow hidden if it goes over to another div I tried “overflow: hidden” but it doesn’t seem to be working for me any ideas…
Jul 20, 2009
I’m using your code base and have modified it to use with tables instead of the ul li that most do. I have it working for the most part except in FireFox the animation is jerky and not smooth like IE6 & 7 (yes I know it’s normally the other way around, LOL). any chance you could give any feed back on my code?
Demo is here: http://jsbin.com/ifomo
Forum Question is here: http://stackoverflow.com/questions/1126489/jquery-examples-horizontal-accordion-table-instead-of-un-ordered-lists-upda
Thanks a ton,
–Phill
Jul 28, 2009
Hi all,
nice tutorial, but i was missing the bg.gif in the Stylesheet.
Complete the “ul li” like this
ul li {
background:transparent url(../images/bg.gif) repeat-x scroll 0 0;
….
Greets from Würzburg / Germany
Aug 6, 2009
[...] Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale. [...]
Aug 10, 2009
[...] jQuery Examples – Horizontal Accordion [...]
Aug 25, 2009
A few people have mentioned the right most accordion didn’t “collapse” as expected. I had this issue & realised it was because I was using an image for the content. I made it a background image instead, and problem solved.
Aug 26, 2009
How to add a second Horizontal Accorion to a page? Is this possible?
I have one Horizontal Accordion working perfectly, but I’d like to have more than one on the same page – how would I code this into the jQuery script in the header? The first section in my 2nd Horizontal Accordian uses the id “#a2″.
I’ve placed my first Accordion in a wrapper div with class .jq_menu, so for it, I’m currently using: $(“jq_menu ul li a”).hover(
function(){
I would like to use $(jq_menu2 ul li a”) etc for the next one.
Thanks for any help, and thanks so much for the tutorial – I’m really happy so far with the way it’s working in my new site (which is almost ready to go live!)…
Aug 26, 2009
[...] Horizontal Accordion Accordion Using jQuery [...]
Sep 7, 2009
After spending some time I could integrate this in my site using iframe. Now the problem I am facing is I cant put links inside the ‘p’ tag where some content and a few links to other pages is required.
Since you cant insert a tag inside a tag and you have to compromise with content only.
Sep 12, 2009
Jquery is very useful for designers and this article tell about it.
Sep 16, 2009
Hi, this is a great one!
As mentioned in comments, I have the problem with pictures : if I want to put a picture in the right side, it appears above the accordion (with IE 8, it’s working fine with FF).
Any idea ?
Thanks a lot!
Sep 21, 2009
nice work
Sep 24, 2009
im wondering how to make the first tab open by default? I thought I was one of the comments addressing this by adding a set width to a1, but this made the a1 a tag remain that width no matter what…I would like it to be open on the load of the page, then collapse if i open another tab..make sense?
Sep 29, 2009
Thanks for the nice work and the willingness to share!
Sep 30, 2009
[...] Design Reviver (horizontal accordion) [...]
Oct 2, 2009
[...] jQuery Examples – Horizontal Accordion [...]
Oct 5, 2009
The content on the Right accordion is not hidden in Firefox when I have an iframe inside it. How can i solve it?
thanks!
Oct 20, 2009
I had to put it in the head tag like this instead:
Oct 23, 2009
[...] Jquery avec effet d’accordéon [...]
Oct 23, 2009
[...] jQuery Examples – Horizontal Accordion [...]
Nov 4, 2009
Wow! It’s so simple. Thanks for putting this into internet.. Like your work
Nov 10, 2009
Nice effect, but please don’t teach people to use wrong HTML-code.
You are putting an anchor around block-level elements to get the cursor: pointer;, but you can get the same effect when you set the cursor at the . This keeps your HTML-code correct.
Remove the and add this to your CSS
li
{
cursor: pointer;
}
Nov 10, 2009
Sorry for the message above, but the HTML-code seems to get removed from the message.
Tip: http://www.php.net/htmlspecialchars
Nice effect, but please don’t teach people to use wrong HTML-code.
You are putting an anchor around block-level elements to get the cursor: pointer;, but you can get the same effect when you set the cursor at the li. This keeps your HTML-code correct.
Remove the anchor and add this to your CSS
li
{
cursor: pointer;
}
Nov 14, 2009
Argmpft….. after an hour of trying and ripping my hair out because it wouldn’t work, I finally figured out what was wrong…..
So if anybody else is trying this in November 2009 – the little accordion script on this website (which is excellent BTW, many thanks!) uses jquery 1.2.3 but the link on this website above leads you to download the latest jquery version which is jquery 1.3.2-min…. it must be somehow different, as the accordion script doesn’t work anymore with the lastest version of jquery.js.
But as soon as I downloaded your old 1.2.3 version which I found in your iframe link, everything worked like a charm.
Again, awesome little script, thanks!
So if anybody is still trying this, download the jquery.js this accordion script is using not the latest one the link leads you too…
Nov 18, 2009
[...] ????? Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous Apple.com Downoads Page Slide out and drawer effect UI/API/1.7.1/Accordion jQuery Plugin jQuery UI Accordion Simple JQuery Accordion menu jQuery Accordion Madness jQuery Examples – Horizontal Accordion [...]
Nov 27, 2009
[...] jQuery Examples – Horizontal Accordion [...]
Nov 28, 2009
nice i like it
Dec 1, 2009
ARRGGH-GREAT
Dec 2, 2009
This is a cool effect. I tried and customized it for my needs and it worked great!!
Thanks!
Dec 2, 2009
cok guzel basar?lar?n?z?n devam?n? d?ler?m s?temde uyguluycam thank you
Dec 4, 2009
awesome. I would like to use in my site as well.
Dec 6, 2009
[...] jQuery Examples – Horizontal Accordion // [...]
Dec 9, 2009
the only thing is that this code is not complied with the W3C!!!!!!!!
Dec 10, 2009
[...] ? Lien : Horizontal Accordion [...]
Jan 5, 2010
Can this code be use as a mouseover/mounseout button effect rather than an accordion effect?
Jan 9, 2010
hi this is great work, same work I used in my some of sites thats developed in mootools but I cant develop this type of work in jquery because some where I need jquery and these both not work together * mootools and jquery ) this is the solution I’m looking many many thanks for sharing code it’s very helpful.
Jan 22, 2010
The code snippets in this article don’t reference the iframe at all.
So please see iframe.
Jan 24, 2010
nice i like it, thanks admin…
Jan 24, 2010
Thanks for helping in IQery.
Jan 25, 2010
Best Jquery accordian I’ve seen to use on websites this year. Will be definatly using this for my projects thanks a million.
http://www.blueprintdesigners.co.uk
Jan 30, 2010
[...] Design Reviver Horizontal Accordion Menu [...]
Feb 4, 2010
[...] jQuery Examples – Horizontal Accordion [...]
Feb 12, 2010
It’s great accordion!
But doesn’t work under Opera 10.10 (Linux and Windows).
Feb 17, 2010
Thanks for the script! I am currently using it for a client site. However, I would love to be able to include some sort of image swap so that when the user rolls over an accordion and it expands the image swaps to something else and back again as soon as the user rolls over the next accordion. Am a newbie so any ideas welcome. Thanks!
Feb 20, 2010
Hello!
Thanks for the post. I too am starting to lean on jquery for java-script… Though, I am wondering – do you have any experience with expanding an iFrame to act something like an accordion effect?
I am searching to learn how to make the web page dim while the iFrame is called up and displays an accordion like expansion till it reaches the dimensions I give it…
Any insight on this?
Mar 1, 2010
Hi guys, perhaps someone can help me. Testing this out for a client and all works fine in all browsers except IE. I have an image in each accordion in addition to the one at the left, but in IE it does not hide in the collapsed accordions but peeps through in the background. Any suggestions appreciated!
http://www.celticpress.ie/modx
Mar 10, 2010
[...] jQuery Examples – Horizontal Accordion [...]
Mar 12, 2010
heyyyyyyyyyyyyyyyy… i found the solution for opera…
The solution for opera problem is as follows:
1. set width:0px; for inner tag
2. set margin-top value in minus(depends on height) .
Mar 16, 2010
[...] Horizontal accordion jQuery [...]
Mar 16, 2010
[...] jQuery Examples – Horizontal Accordion [...]
Leave a Comment