jQuery plugin: Easy Accordion

Blog

A couple of months ago I found myself looking for a jQuery plugin to create a horizontal accordion. I needed a simple and clean solution for one of my projects and, at a first glance, Slidedeck seemed to be what I was looking for. Unfortunately, this turned out to be not that flexible as I wished it to be.
Hence, I decided to create my own horizontal accordion plugin.

In fact, as soon I purchased the Slidedeck plugin for 99$ I found out few things that made me pretty upset.

Firstly, I wanted to amend the script in order to slighlty change the accordion behaviour but I soon realized that I couldn’t do anything because the plugin I purchased was totally encrypted. This makes completely sense to me, because otherwise people might share the code and give it away for free. Although, the annoying down side is that you spend 99$ and you get something that you cannot modify at all.

Besides, IE6 was not supported and this wasn’t clear at all from the Slidedeck website. Now, I now what you’re thinking… “IE6? That’s a dead browser man! Why would you expect any support for it?” Well, I totally agree that we should all drop support for IE6, nevertheless I happen to have clients that still need their websites to look at least fine in IE6. And no, I can’t get rid of them!

For all these reasons I opted to make my own accordion plugin. This was definitely a tougher challange than the one I took on with the Easy List Splitter plugin. Creating such a plugin is much more complicated and took me several nights and weekends to get it done and to make it working cross-browsers. The result is pretty good and hopefully it will help you whenever you need a highly flexible horizontal slider able to show any kind of content (text, images, lists, etc.).

A special thanks goes to Andrew Thompson because without his priceless help I would still be there trying to make multiple instances working on the same page.

How does it work?

Easy Accordion plugin will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still.

You can see the Easy Accordion Plugin in action here. As usual, all of that will be realized in an unobtrusive, SEO friendly and accessible way.

What’s new?

Easy Accordion Plugin keeps the HTML to the minimum, is SEO friendly and fully accessible, uses the CSS rotation to rotate the slide titles (no need for images here!), works in all the major browsers, allows for autoplay, it’s opensource and fully customizable and, what count most, it’s free!

Features

  • Easily create a nice and smooth accordion effect
  • Decide whether or not automatically animate your slider
  • Insert multiple instances of the accordion in the same page
  • Set the active slide when the user loads the page
  • Include or remove the slide number
  • Text is rotated using CSS properties. No need for images!
  • Easy Accordion is totally customizable via CSS: change height, width, set borders and paddings, use background images and so on
  • Accessible and SEO friendly
  • Slide any kind of content (divs, simple text, images, lists, etc.)
  • Less than 8KB!
  • No dependencies at all!

Planned additions

I’m totally open for suggestions.

Usage

Here is the HTML code for a simple definition list wrapped into a div container:

Title slide
You can put here any kind of content (divs, text, images, etc.)…
One more
You can put here any kind of content (divs, text, images, etc.)…
Another slide
You can put here any kind of content (divs, text, images, etc.)…

We need now to include three different files in the head of the document: the jQuery library, the Easy Accordion plugin and our Script file from where we’re going to call the plugin. If you do not know yet how to set up your jQuery environment, you can find a detailed explanation in my first jQuery tutorial, otherwise just keep reading!

You can target any definition list using the powerful JQuery-selectors. The plugin accepts different arguments.

Parameters

Make sure you wrap your definition list into a div container and call the plugin on the div element and not on the definition list straight away:

$('#your-accordion-container').easyAccordion();

If you don’t pass any parameter to the plugin it will generate a simple accordion with slide numbers and no autoplay by default. To see the hidden slides userswill have to click on the respective slide titles.

To enable the autoplay you simply have to set the “autoStart” parameter to “true” and the “slideInterval” ( in milliseconds) to a number as follow:

$('#your-accordion-container').easyAccordion({
   autoStart: true,
   slideInterval: 5000
});

In this example the plugin will move to the next slide every 5 seconds. As soon as it gets to the last slide it starts over again. If you click on one of the slides the slideshow stops so that the user can easily read the content or move back and forth.

You can also remove the slide numbers by setting the “slideNum” parameter to “false” as follow:

$('#your-accordion-container').easyAccordion({
   autoStart: true,
   slideInterval: 3000,
   slideNum: false
});

Apply your CSS

In the demo page you will find two different bits of CSS marked with CSS comments. The first one shouldn’t be changed unless you’re really confident in what you’re doing. The second one, instead, can be updated in order to customize your accordion for your needs.

Browser support

The jQuery Easy Accordion plugin has been tested on the following browsers:
Firefox 3.5+, IE6/7/8, Safari 5+ and Google Chrome.

Conclusion

This plugin is totally free neverthless, as it took me quite a good number of sleepless nights, a free donation will be really appreciated. A link back to this post would be much appreciated too! You can get the Easy Accordion plugin full sample here (250KB – zip file) or get the JavaScript file only below.

Buy us a beer!

Posted on Tuesday 14 September 2010 at 14:48

Andrea Cima Serniotti

Andrea is the founder of Madeincima. As well as being the Creative Director, he deals with the design and the realization of websites, plans the projects and makes sure that our services are always top quality.

376 commenti all'articolo

  1. hasancy says:

    Great Script! Thanks for this script.
    But Uploaded version does not work ie8.

  2. Thanks for the plugin.

    I have written a article on how to implement this in WordPress.

    Link: http://buildersnippets.com/easy-accordion-jquery-plugin-in-ithemes-builder/

  3. elgo says:

    great script!! thx!!
    Don’t work with IE10 but below my workaround:

    // ——– Set the variables ——————————————————————————

    if (jQuery.browser.msie && jQuery.browser.version >= 10.0) { dtWidth = jQuery(this).find(‘dt’).outerHeight() ; }
    else if (jQuery.browser.msie) { dtWidth = $(this).find(‘dt’).outerWidth(); }

    // ——– Fix some weird cross-browser issues due to the CSS rotation ————————————-

    if (jQuery.browser.safari || jQuery.browser.msie) { var dtTop = (dlHeight – dtWidth) / 2; var dtOffset = -dtTop; /* Safari and Chrome and IE*/ }
    if (jQuery.browser.mozilla) { var dtTop = dlHeight – 20; var dtOffset = -20; /* FF */ }
    if (jQuery.browser.msie && jQuery.browser.version >= 10.0) {
    $(‘.easy-accordion dt’).css(‘transform’, ‘rotateZ(-90deg)’);
    $(‘.easy-accordion .slide-number’).css(‘transform’, ‘rotateZ(90deg)’);

    ddWidth = dlWidth – (dtWidth * slideTotal) – ($(this).find(‘dd’).outerWidth(true) – $(this).find(‘dd’).width()) ;
    }
    ….

  4. Kranthi says:

    Hi Andrea,
    Great to have this stuff.

    I have used the same code in my html page, but it not compatible with IE9, but the source code which you have done is working in IE9. Please give some solution.

    Thanks
    Kranthi Kumar Vemula

  5. Carl says:

    I hate to say this, but it doesn’t working in IE 9 or IE10 for me.

    In IE9, the vertical bars are missing, or basically all white.

    In IE10, they are at the top of the slider and in a horizontal position.

    I’ve been searching because I’ve had recent issue with SlideDeck and I’ve been looking for an alternative.

    Easy Accordian doesn’t appear to work either.

    Carl

  6. Alex says:

    I can’t seem to get it to work in IE9 with Luch’s updated version v0.1.8. all that comes up is a white box with half of a unselected heading in it.

  7. Frank Murphy says:

    Luch

    Thanks so much for replying to my comment about IE10. I have downloaded the ZIP file from the github address you gave in your post on March 24 but it’s still not working for me in IE10. Even the sample page that is downloaded as part of the ZIP file doesn’t work – the slide tabs are not rotating 90º. Am I missing something?

    Thanks a million

    Frank

    P.S. Meant to say on my last post – the script is amazing – so easy to set-up an use – thanks a mil

  8. fergon says:

    don´t work in IE 10

  9. bruwn says:

    hi,

    I had some issues with positioning of dt in chrome and opera. The following best answer inserted into the cross-browser-fix-area of the jQuery should fix the problem.

    http://stackoverflow.com/questions/3303858/distinguish-chrome-from-safari-using-jquery-browser

  10. Ana says:

    Excellent Plugin. The only thing is that in Opera Browser dt are note positioned correctly. Any help?
    Thanks

  11. Chris says:

    Will there be a wordpress plugin for that? It’s awesome searching for something like that for ages.

  12. Hi Folks,

    On github.com/Luch/EasyAccordion you find a version that addresses a lot of your questions posted on this blog.
    IE10 support, Chrome vertical strips, etc.

    I also posted a successor of easyAccordion called conventAccordion on github. It supports horizontal and vertical accordions, galleries, rotating banners and more.
    Check it out on github.com/Luch/conventAccordion.

  13. Yavuz says:

    thanks but ie10 problem..

  14. Matt says:

    Love your accordions, and you did an amazing job with the overall presentation too.

    I’m having a minor issue with my implementation: When I click back to a previous slider, the accordions moves back properly, but the previous slider’s contents show up right away, instead of being revealed as the slider moves, The tab, however, does slide back properly. Have any others experienced this as well?

    Firefox 19 for Ubuntu

  15. Hasan says:

    I want to pause this on mouseover and want to resume after mouse out…
    What I have to do for it.

  16. Alejo says:

    Hello everyone.
    It’s a great script, I prove the Luch script, but I still have troubles in Chrome, a vertical line that display. :(

  17. Thomas says:

    Hi
    This plugin seems to break in IE10, up to and including IE9 it was working fine.

    I have removed the “ms-” from “ms-transform” in the css which seems to help a bit but i cant get the positioning right with “transform-origin”. I dont really want to reposition it with margins as it looks fine in other browsers and changing that would break the other ones.

    Any planned update for this?
    Thanks

  18. raghav says:

    Nice one

  19. Rake says:

    Hi, Fantastic tool, just a pity that it does not work in IE 9 or IE 10

  20. mayra says:

    Hi,

    First of all, I want to thank you for such a wonderful plugin. It works wonderfully. I have one question on it though. For Safari and Chrome I am getting the dt font showing up blurry. Any suggestions will be appreciated.

    Thanks again!

  21. Frank says:

    Michel

    Where is the ‘Uploaded version’ that you got working in IE10? Every version I’ve tried doesn’t seem to work in IE10.

    F

  22. Maxpower says:

    I looked into IE10.

    I use customized version 0.1.4 of EasyAccordion. I use fluid (window resize calculated) styles.

    The biggest problemn with IE10 was to get -ms-transform-origin… I didn’t get how to calculate this.

    Here’s what I did (lines might differ slightly)

    Line 48 (calclulate the correct height for variable):
    if (jQuery.browser.msie && jQuery.browser.version >= 10.0){ dtWidth = jQuery(this).find(‘dt’).outerHeight();}

    Line 59 (Partially found the solution from Xavier @ http://forge.typo3.org/issues/39719):
    if(jQuery.browser.msie && jQuery.browser.version >= 10.0){
    // Your dt width
    dtWidth = 35;
    $(‘.easy-accordion dt’).css(‘-ms-transform’, ‘rotate(-90deg)’);
    $(‘.easy-accordion dt’).css({‘-ms-transform-origin’ : ’0 px ‘ +’20px’});
    // Instead of calculating transform-origin, I used plain old margin
    $(‘.easy-accordion dt’).css({‘margin-top’ : ”+(dtHeight+3)+’px’});

    // Don’t use these, haven’t tested
    $(‘.easy-accordion .slide-number’).css(‘-ms-transform’, ‘rotate(90deg)’);
    $(‘.easy-accordion .slide-number’).css(‘-ms-transform-origin’, ’15px 21px’);

    // From Xaviers post
    ddWidth = dlWidth – (dtWidth*slideTotal) – ($(this).find(‘dd’).outerWidth(true)-$(this).find(‘dd’).width());
    }

    Line 87:

    // Final adjust to place
    if(jQuery.browser.msie && jQuery.browser.version >= 10.0){
    jQuery(this).css({‘width’:dtHeight,’top’:dtTop,’margin-left’:’19px’});
    }

  23. Darren says:

    Thank you so much for this awesome plugin!

    Any tips on how to create a static open on page-load rather than the accordion sliding open?

    Love your work

  24. Hasan Hafiz says:

    Thanks for your nice plugin.

    You are awesome.

  25. saderi says:

    Hello
    i have problem, when i using jquery easing plugin, easy accordion plugin not work

  26. Michel Weegerink says:

    Local version will not work.
    Uploaded version will work!

  27. Michel Weegerink says:

    Meaning your new version: easy accordion v 0.1.8

  28. Michel Weegerink says:

    Luch Klooster: I can not get it to work in IE10!
    Could you tell me if it shoudl work in IE10?

    Michel Weegerink

  29. Today I placed version 0.1.8 on Github.
    In this version I added:
    * element dd-content to be able to provide extra css to slide
    * code to make accordion adjust size on fluid templates (needs jquery.ba-resize.js and some css changes) .

    Download via http://github.com/Luch/EasyAccordion

  30. To fix the vertical stripes bug in Chrome just add ‘-webkit-backface-visibility: hidden;’ to the entries dt and slide-number in your .css. This are the entries whit the transforms.

    Or download from github.com/Luch/EasyAccordion

  31. Hello to all you posters!
    Just released my enhanced version of this beautiful plugin.
    It addresses most of the reported issues, has support for IE10 down to IE6, and all other modern browsers. I added pause on hover, act on hover and many more. Also you find a new skin Stitch in the CSS folder. And more to come…
    Have a look at it on github.com/Luch/EasyAccordion

  32. Bruno says:

    How can I start the accordion on the 3rd slide?

    Thanks!

  33. Ali says:

    Very nice and useful accordion plugin. Thanks

  34. quigonn says:

    Hi, i really liked your work. i am however getting vertical lines in an accordion background image in chrome. please advise. thanks!

  35. rakesh says:

    excellent, awesome work

  36. jonnyw says:

    Anyone get this working correctly in IE9?
    The CSS is ok..but the JS slides the tab right out of visibility

  37. Juanjo notes he is receiving noMoreActiveID is not defined.

    More specifically, this happens on Macintosh 10.7.5 with Chrome (Not Safari). The complete error message is…

    Uncaught ReferenceError: noMoreActiveID is not defined – easyAccordion.js:140

    jQuery.fn.activateSlide – easyAccordion.js:140

    (anonymous function) – easyAccordion.js:175

    p.event.dispatch – jquery.min.js:2

    g.handle.h – jquery.min.js:2

  38. HelloThere says:

    Would be awesome if it would have a feature to scroll the content up and down in it just like slidedeck has

  39. Martín says:

    I am also trying to fix the vertical line problem in Chrome. Can Paragon or someone post the actual change and describe how to implement it? Becouse I try to use Paragon solution but it did not work for me.

    Thanks for your help.

  40. juanjo says:

    A javascript error is shown :
    Uncaught ReferenceError: noMoreActiveID is not defined
    Any idea? I use the last jquery version 1.8.2 may be an incompatibility issue?

    Thanks in advanced

  41. mrdan says:

    I am also trying to fix the vertical line problem in Chrome. Paragon expressed a solution – to .toggle() the active element in the animate() step function. Can Paragon or someone post the actual change and describe how to implement it?

    Thanks for your help.

  42. Guilherme Gualtieri says:

    Hey, nice plugin!

    I was hadding one issue in chrome with the dt element, that was breaking, so after some research, i found in the jQuery API that jQuery.browser.safari is deprecated.
    So, to get working again in Chrome and Safari again, you should replace

    // ——– Fix some weird cross-browser issues due to the CSS rotation ————————————-
    if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ }

    for:

    // ——– Fix some weird cross-browser issues due to the CSS rotation ————————————-
    if (jQuery.browser.webkit){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ }

    Hope it help :)

  43. Alex says:

    Thanks for great plugin!
    Maybe some of you tried to solve issue with ie10 too? dt elements doesn’t rotate and slide animation looks wierd…

    in three weeks with w8 release ie10 can became a new pain…

  44. Tom says:

    @Gabriele: Same problem, on IE9 the active Area of the tabs is only about 40px. In other browsers it works like a charm. Has anyone a fix for this? Thanks for the great accordion!

  45. Emmanuel says:

    Hello there i have changed one line in the script as the safari browser detect is debregated
    if (jQuery.browser.webkit){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ }

    Would somebody be able to help me i would like to change the dt width depending on browser resolution on change. I tried to add a browser size detector then reset the variables, but it seems to not be working.

    The function i guess to be used is $(window).resize(function(){ but cant seem to integrate it, i did add the noconflict before thought.

  46. Franz says:

    ouch seems tags are stripped

  47. Franz says:

    if ((jQuery.browser.msie) && ($.browser.version>=9)){
    jQuery(this).find(‘dt’).each( function() {
    content=”"+jQuery(this).html()+”";
    jQuery(this).html(content);
    })
    }

  48. Franz says:

    solved IE 9 this way (not the more elegant way, but seems to work)

    if ((jQuery.browser.msie) && ($.browser.version>=9)){
    jQuery(this).find(‘dt’).each( function() {
    content=”" + jQuery(this).html()+”";
    jQuery(this).html(content);
    })

    put it after this line (#32 in my editor)
    if (jQuery.browser.msie){ dtWidth = jQuery(this).find(‘dt’).outerWidth();}

    hope it save some headache to someone

  49. Lenamtl says:

    Any other theming available for this plugin?

  50. Miguel Angel says:

    I have the same problem than Dan & Gabriele, anyone can solve the problem. Im thank it forever.

    I need help!!!

    Thank for your time !!

  51. Pablo says:

    Si James, Thanks a lot! Your answer was the solution for my problem!!
    Warm greetings from Argentina!!

  52. kg69design says:

    Does not work in Opera 12.01

  53. Paragon says:

    It seems in recent Chrome versions, 21 and up, there’s a bug in the script’s jQuery animate() calls. During the transition of the slides, vertical lines appear over active slide’s content, the elements. The lines appear to be caused by the background property of the slides’ tabs, the element.

    To solve this, either remove the background property from the element, or, since that’s most likely not possible, find a way to force the browser to render the element again. Our solution was to .toggle() the active element in the animate() step function. For example in our specific case we used:

    step_function = {};
    $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
    if ($.browser.chrome) {
    step_function = {step: function(now,fx) {if ($(‘#homepage_accordion dd.active’).get(0) != $(‘#homepage_accordion dd:last’).get(0)){$(‘dd.active’).toggle()}}};
    }

    Then chain this function to any problematic animate() call, like so:

    jQuery(this).animate({‘left’: leftDtPos},step_function);

  54. Peter Jensen says:

    I have a problem with this script because if the page is typed in the address bar and entered that way the site loads incorrectly, but if it then refreshed by hitting command+r the site loads correctly. It is a margin-left which is not updated correctly in the first instance.

  55. Liz says:

    Great slider! However, I am having the same problem as Gabriele in IE9. Any suggestions?

  56. stefania says:

    Hi at all! I need to have all tabs closed when i open the page,is possible?
    Tnx
    Stefania

  57. Miguel says:

    Ok i solve it… i reply to myself… i hope to help others…

    In the CSS code go to the line DT and change the height to the real

    PE #accordion-1 dt{height:550px ………}

  58. Miguel says:

    I have a problem…. the dt area to click in IE is only a small part of the DT… how can i solve the problem??? any suggestions.

    Thansk for all

  59. Alex says:

    Good work

  60. Dimi says:

    Perfect , thanks, i’m going t implement this.

  61. Rob says:

    Is there a way to add bookmark to, lets say, slide 3 from another page.

    So if your on a different page, and you click a link it will take you directly to that slide, and not start on the first slide?

  62. microcipcip says:

    Fix for IE9:
    #accordion-1 dt {
    -ms-transform: rotate(0deg);
    }

    Fix for IE7, IE8: wrap your dt title with a span, like this:
    Lore ipsam

    Now add this css:
    #accordion-1 dt span {
    display: block;
    height: 318px;
    }

  63. Gary says:

    Was struggling with IE9 small click area, and finally saw Alain’s small post about adding the following:

    -ms-transform: rotate(0deg);

    I added that into the .easy-accordion dt style, and it works like a charm

    Thanks, Alain!

  64. Cthulhu says:

    IE Fixes:

    jQuery not working? Open jquery.easyAccordion.js and on line 32 change “$” for “jQuery”.

    Click areas not correct? Just add “-ms-transform: rotate(0deg);” to the item “.easy-accordion dt” in your CSS.

    Cheers!

  65. Kolyan says:

    Thanks to author for sharing this utility. I’ve encountered some problem in IE9. It seems to be these sliders tabs are reading horizontally even if there image to click on. Any idea how to fix that? Thanks

  66. David says:

    Is it possible to get the Accordion to re-size with the content? I haven’t looked over the code much (as I am not the greatest with jQuery) so if anyone could help; that’d be much appreciated!

  67. Daz says:

    I’m having the same problem as Gabriele.

    IE 9 only allows a small clickable area within the tab (near the top) not the whole thing! I know IE are the worst web browsers out there, but they are the most commonly used! Hopefully someone can help find a fix!

    Any help is greatly appreciated!!

  68. Dan says:

    I would like to modify the area on each slider tab to be clickable for a greater area than just the top of the tab. How can this be accomplished? Thanks for your help.

  69. Gabriele says:

    Hi, i’ve a problem with IE 9….when i try to click the active area are only 44px, not all the tab……can anybody help me ??

  70. Martin Gautier says:

    I’ve added to Luch Klooster’s enchanced version of this script (https://gist.github.com/2584820).
    0.1.4 2012-05-03 Martin Gautier
    * Fixed “accordianInstance is undefined” on click event
    * Added afterClickCallback option

  71. Max Power says:

    I’ve got this accordion to work with Asuals history plugin like this (I’m sure there would be a better way, but this is what I came up with really fast):

    $(‘#slide1′).click(function() {
    $.address.path(‘slidepath’);
    }

    and then the address change:

    $.address.change(function(event) {
    if (event.value == ‘slidepath’) {
    $(‘#slide1′).activateSlide(); // I had this first with Jquery .trigger();
    }

    …but there seems to be some odd behaviour. The slides, when triggered from back / forward button appears just fine. But when I click for example the first slide when viewing the third the content shows immidieately – only the element slides back on top of the content… to be a little more specific the background of the first slide seems to be transparent. But it’s set to #fff.

    Any ideas what might cause this?

  72. Mi scusi… that previous code was incorrect. Here’s the updated code!

    		jQuery.fn.calculateSlidePos = function() {
    			var u = 2;
    			jQuery(this).find('dt').not(':first').each(function(){
    				var activeDtPos = dtWidth*activeID;
    				if(u <= activeID){
    					var leftDtPos = dtWidth*(u-1);
    					jQuery(this).stop(true,true).animate({'left': leftDtPos});
    					if(u < activeID){ // If the item sits to the left of the active element
    						jQuery(this).next().css({'left':leftDtPos+dtWidth});
    					} else{ // If the item is the active one
    						jQuery(this).next().stop(true,true).animate({'left':activeDtPos});
    					}
    				} else {
    					var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1));
    					jQuery(this).stop(true,true).animate({'left': rightDtPos});
    					var rightDdPos = rightDtPos+dtWidth;
    					jQuery(this).next().stop(true,true).animate({'left':rightDdPos});
    				}
    				u = u+ 1;
    			});
    			setTimeout( function() {
    				jQuery('.easy-accordion').find('dd').not('.active').each(function(){
    					jQuery(this).css({'display':'none'});
    				});
    			}, 400);
    
    		};
    
  73. Hey,
    I found a bug in your plugin recently and thought I’d post the fix I came up with.
    I found that if I load a site that uses easy accordion and change to another tab in my browser for 5 minutes… when I return to the easy accordion page the animations are firing very quickly. It appears your setTimeout for autoStart causes the animate() function to build a queue when the browser tab is inactive. When switching to the browser tab the animation queue fires as quickly as possible to catch up with itself.

    The fix I came up with was to put .stop(true, true) before any animate function. Here’s the edited calculateSlidePos function if it helps…

    		jQuery.fn.calculateSlidePos = function() {
    			var u = 2;
    			jQuery(this).find('dt').not(':first').each(function(){
    				var activeDtPos = dtWidth*activeID;
    				if(u <= activeID){
    					var leftDtPos = dtWidth*(u-1);
    					jQuery(this).animate({'left': leftDtPos});
    					if(u < activeID){ // If the item sits to the left of the active element
    						jQuery(this).next().css({'left':leftDtPos+dtWidth});
    					} else{ // If the item is the active one
    						jQuery(this).next().animate({'left':activeDtPos});
    					}
    				} else {
    					var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1));
    					jQuery(this).animate({'left': rightDtPos});
    					var rightDdPos = rightDtPos+dtWidth;
    					jQuery(this).next().animate({'left':rightDdPos});
    				}
    				u = u+ 1;
    			});
    			setTimeout( function() {
    				jQuery('.easy-accordion').find('dd').not('.active').each(function(){
    					jQuery(this).css({'display':'none'});
    				});
    			}, 400);
    
    		};
    

    I hope it’s of some use. Cheers for the plugin!

  74. Cizgi Film says:

    Thank you for sharing.

  75. andy says:

    Doesn’t work so well on iOS, slides seem to disappear after you cycle through them.

  76. Alex says:

    Great work. Using easyaccordion for a while now (to accomplish multiple steps in a form). Very customizable. Thanks to the author.

  77. Si James says:

    I was having trouble with IE8/9, as some others have reported here. The solution I found to work was to add a tag around the text within the . Setting the height manually and display to block enlarges the click area to it’s container (the ).

    I did it manually, made sense for the little project I was working on, but could easily be achieved through the jquery:

    Mashable!01

    Hope this helps others!

  78. **HEADS UP**

    The Plugin breaks in IE on wordpress because of the use of dollar on line 32. Changing $ to jQuery fixes the problem as WP has jQuery running in noConflict mode.

  79. Igorka says:

    Hi. It is a very nice and lightweight plugin.
    Just 1 question. Is there any way to use ajax here to load some external data. If Yes, could please hint How to.

    Anyway, great job!

  80. IainP says:

    great work!, works fine in all browsers except ie, where it displays wrong, anyone else had this issue?

  81. Muna says:

    Hi,
    Thanks for this i wanted your help,
    how do you add the ‘active’ class to the respective DT element if i want the 4th tab to be active on load.
    thanks

  82. marq104 says:

    I am bothered by the rotated text and would rather have real verticle text like this
    T
    H
    I
    S

    I found a solution at http://stackoverflow.com/questions/278940/vertical-text-with-jquery and used this.
    $.each( $(".verticalText"), function () { $(this).html($(this).text().replace(/(.)/g, "$1")) } );
    If I set .verticaltext {text-align:center} I get a very nice result. However, it breaks the dt width which is adjusted for rotated text.

    Perhaps you can append the plugin to use verticle text instead.

    I’m trying to recreate http://www.damon-nestor-ploumis.com

    Thanks,

  83. Great work mate. I’m trying to use it in a site but I need it to stop when a link inside the accordion is clicked. Unfortunately my javascript is minimal and I don’t speak jQuery. Any chance of a helping hand?

  84. Nathan says:

    After looking through several sliders, this was the easiest to work with and modify to what was needed for the site. However, it seems to have a critical error on any Firefox browser 3 or below. The slides fall below the images. At first I thought it was just the modifications I made to it, but it does the same thing on the demo page here as well

  85. rhys says:

    Does anyone know if it’s possible to have the accordion stay on the same slide after a page refresh?

  86. Alex says:

    Hey, great add on. I’d like to use it to power my gallery directory in SmugMug. Is there any way to have the slide open when the mouse is rolled over it? Thanks!

  87. Krzysztof Laska says:

    Here is fix for Opera: use opera’s own css parameter: -o-transform: translateX(value) translateY(value) rotate(value); I was able to perfectly positon menu elements.

  88. AbdelKarimCI says:

    Thank you very much, this is a great work!!!

    can you make the content collapsible?

  89. Jonny Wood says:

    .hover works – I was trying .hoverIntent but hadn’t included the .hoverIntent plugin code! oops.

  90. Jonny Wood says:

    Looking for the .click event in the source to change to .hover – thought I’d done it but nothing changes. Is there a way to implement the slide on hover instead of click?

  91. John says:

    I’m modifying the script to use Next/Previous buttons instead of spines (spines = dt elements).

    I’ve managed to get the plugin to display full width slides without the spines pretty easily with this css:

    .easy-accordion dt{display:none;}

    Along with this code branch inside the setVariables() function:

    if (!jQuery(this).find(‘dt’).is(‘:visible’)){
    dtWidth = 0;
    dtHeight = 0;
    slideTotal = 0;
    //Now dynamically add the previous & next buttons, along with click handlers for each to trigger slide advance and rewind.
    }

    Now, I can trigger the slide advance with:

    accordianInstance.rotateSlides(interval, timerInstance);

    However, it only advances once and I cannot get it to go to the previously active slide.

    Any help or tips much appreciated.

  92. rhys says:

    This script is amazing…but i was wondering if it’s possible to link to each slide sepeately? Thanks

  93. Vinod says:

    i tried this jquery in my app(not in this website), but in the first page load the side bar image is not showing-even in the developement time. but if i press F5 it show. i using Vs 2008. kindly advice

  94. hunterd0319 says:

    i want to resize the slider,whate should i modify?

  95. zubair says:

    It does solve the IE9 issue after applying the patches given by Luch Klooster. The image in dt becomes transparent. Please help

  96. Alain says:

    Hello, for the small click area on IE9, you add:
    -ms-transform: rotate(0deg);

  97. Thomas says:

    Great work to create this plugin and for free too.
    I would like to implement this on my wordpress blog, but I realise I cannot install it like a regular WP plugin. Can somebody please do a small tutorial on how to implement this? I would be very grateful.

    Best Regards

  98. Beth Pinvises says:

    Andrea,

    Hey I was wondering how i would put more than 4 accordions on a page? right now i need at least 8 but if i could have more that’d be awesome! thanks

    Beth

  99. Harts says:

    Thanks for the code. I have one question, How can we add hover effect, so that when we have mouse over slides can move, an effect like this website http://www.shiparoom.com/. I would appreciate your help. Thanks again

  100. we needed the ability to stop the accordion after a single run, so i added the option to do that. you can download the revised code from our site: http://binarym.com/2011/extending-the-jquery-easy-accordion-plugin-add-looping-option/

  101. Paul Chapman says:

    First off, great alternative to SlideDeck. Well Done.

    But having tested the demo page in IE6, it appears not to work correctly.

    Screenshot: http://tinypic.com/r/2natx8m/5

    Any advice?

  102. ituki Beck says:

    I think I’m responding to Opera draft
    CSS add
    .easy-accordion dt{-o-transform: rotate(-90deg);-o-transform-origin:98px 97px;}
    #accordion-1 dt{/* Opera */-o-transform: rotate(-90deg);-o-transform-origin: 123px 122px;}
    How is this proposal?

  103. William says:

    Very nice work, congratulations.
    Jquery.easing would be a good approach.

  104. Eenda Works says:

    Doesn’t work in IE8. All tabs looks in horizontal mode, like user @robot said…. please.. help!

  105. Daniel Kussin says:

    Goog morning

    I got some trouble with the IE8 and older. The problem is that there is only a small click area on the slide title and this was discussed here before. But I couldn’t find a solution which works for me. I could solve the problem with IE9 by following the instructions in post (#comment-801).

    Maybe you allready fixed the problem.

    Thanks for your great work.

  106. Michael says:

    Andrea,

    Never mind about my previous post. I went ahead and replaced my slidedeck with yours and it as absolutely perfect haha. THANK YOU A TON! I’m going to send you a donation once I get paid for this site. Get you some beer money, lol.

    I do have one question…
    Is there a way to place a background image for each slide in the CSS? I tried to place it in the but of coarse that placed the same background image in all 3 of my slides. Is there a way to have a different background image in each slide? I tried in my css html but it didn’t work. Maybe because the java isn’t set up that way. I’m not how to change that or if there is a better way to do this.

    Thanks!!

  107. Michael says:

    Hello Andrea,

    I recently purchased SlideDeck and it was a terrible mistake. I am using Pro on a wordpress site for a client. After creating my on custom skin and loading the plugin, I started to add my content in each slide. Slide Deck claims full HTML customization using the HTML tab on each slide in the plugin. Every time I entered my HTML and saved it would completely strip my HTML code rendering the slider useless for call to action buttons and things like that. FALSE ADVERTISEMENT! The help forums full of slidedeck employees are NO HELP. I only got one reply to my question and it was absolutely worthless. I have now wasted 100 bucks of my clients money. I’m very pissed and frustrated with SlideDeck.

    After searching for a solution I came upon your Slider. So far I love what I am seeing. Will the slider work in wordpress and can I use html inside of each slide for buttons?

    Thank you so much. The slider looks great! :)

  108. Ralph says:

    I’m new to this. The accordian is great; Thnx.
    I need it resized to 570px X 175px in order to place it in a web part in Sharepoint. – Any suggestions?

  109. Roman says:

    Hi, I need something just like this but to work Vertically. Is that possible? I found something similar but it’s buggy (see http://www.pixeltrics.com). I need to replace it with something that has a consistent auto-play interval and works smoothly like yours.

  110. Mike says:

    Like this plugin in.Great effort and work. Hopefully i can make good use of it for simple solutions for people in needs. Thanks..

  111. Ianemv says:

    Nice one! I was about to download SliderDeck but when I found out that it has a “Pro” and “Lite” version”, I became hesitant to have a copy of it so I look for alternatives. Glad I found your post! I could be diving into volcano lava if I didn’t stepped on my brake pad! Thanks for sharing this!

  112. xtream says:

    Simply beautiful. This is what i was searching for.

    Cheers…..

  113. Terry Henderson says:

    I like your design. I would very much like to not have the numbers on the bottom. I have tried a dozen things to get rid of them. No success. Anyone have a suggestion on how to hide the number on the bottom of the tabs?

  114. ramu says:

    I have seen demo in your site It looks good. now i have done in my site i have a small problem where it is not displaying the Slide name and number for the active slide .what should i do

  115. Luke says:

    Hi,
    I really like Your work!
    I’m using the script on a new project and I got problems working it smooth on Opera 11.52. Changing tabs or scrolling page down slows the browser a lot. Has anybody noticed it too?

  116. Ryan says:

    Amazing plugin! Would anybody be able to give me a few pointers on how to go about having a different image for each spine? I appreciate any help given.

  117. Gamma911 says:

    Thanks for the script! I was wondering if there was an easy way to make it responsive? I.E Resize depending on the browser width so that I can use media queries?

    This usually means using percentage values etc, I’ve tried a few things but it’s mostly been unsuccessful. Any guidance would be appreciated!

  118. Roman says:

    Has anyone found a way to make it into a vertical accordion so things will move up and down vertically and stack vertically?

  119. Andygh says:

    Awesome accordion you made and its so easy to use. I have a question though (this is just personalization):
    How can I make the numbering into a “+” sign and a “-” when its an active slide?
    Thank you for your time.
    AndyGH

  120. Chris says:

    Great plugin!

    Question: Is it possible to have the slides be initialized by the day of the week?

    Example, 5 sides each representing the day of the week. I visit the site on Wednesday and the 3rd slide is active. Visit on Friday and the 5th slide is active. And still have the ability to click on the other slides at any time.

    I’m thinking of using this plugin for a schedule of sorts.

    Do you think it’s possible? And, how would this be done.

    Thanks for your help,

    Best regards,

    Chris

  121. Markus says:

    Good work! Easy to implement.
    I’d like to have an arrow key navigation like Sidedeck. Any idea?

  122. Jon says:

    How do I change the spacing between the slide titles? I’d like to add about 10px between each slide.

  123. student says:

    IE 8 have the error:

    jquery.easyAccordion.js
    accordianInstance is null or not an object.

    What’s wrong?

  124. robot says:

    IT is great in Firefox and Chrome! But not in IE9! All the vertical slides are change to horizontal! please help!

  125. ankush says:

    thank u soooooo much

  126. You have done a cool job as your story is recommended by mobile & social media marketing wizard Christian Dillstrom.

  127. letofus says:

    when i watch the demo page with ie9, the cursor (hand) is just on top of slide for clicking…i would say approx 50 pixels maximum
    Do you know how to solve this little problem?
    thanks

  128. yabee says:

    Thank you!!! I finally found a great horizontal accordion that is easy to install and no BS if you know what I mean. Thank you so much!!

  129. letophus says:

    hello

    when i watch http://www.madeincima.eu/samples/jquery/easyAccordion/ on ie9, stange but the hand cursor is just on top of slides, not on all!
    any idea of to fix this little problem?
    thanks
    le tophus

  130. Nathan Hall says:

    Anyone know the answer to this??????????????????

    Does anyone know how to select a specific slide from an outside link? I have a link on my page (Contact Us) that I would like to automatically open the Contact Us Slide in my Accordion.

    I’ve tried using the following, but no luck:
    $(‘#slide3′).activateSlide();

    Suggestions would be greatly appreciated!

    • Luch Klooster says:

      Nathan,

      Give a unique class to all slides. Lets say: Slide 1 gets class=”spine_1, slide 2 gets class=”spine_2″, etc.
      Now you can easily active a particular slide. To activate slide 5: $(“dt.spine_5″).activateSlide();

      To activate a slide by clicking on the link, give the link an onclick event.

      I placed an enhanced version of easyAccordion.js on https://gist.github.com/1071448
      The enhanced script is already giving a unique class to all slides to support skins like Stitch.
      So when you download and use my enhanced version you only have to add the onclick event.

      Luch Klooster

      • Nathan Hall says:

        Hello Luch,

        I greatly appreciate your help! I think this solution will work perfect for me, but I have a small issue setting it up. I’ve replaced my accordion script with your enhanced version, but the classes were not being added to my “dt” elements. I added styles to my CSS for “.slide_1, .slide_2, .slide_N” and the classes were then added to all of my “dt” elements.

        I then regestered the script in my ASP.NET application $(‘dt.spine_3′).activateSlide(); – I hard coded this to see if I could get slide three to be selected from within my code. This generated an error that “activateSlide” was not supported. Any ideas?

        1. Should I define the CSS classes for each spine_N class? If so, what should be in them? Just blank?

        2. I’m trying to call “$(‘dt.spine_N’).activateSlide()” from outside of the accordion script. Will this work since it’s not within the accordion Script?

        Thanks for you help!

      • Nathan Hall says:

        Would you be willing to help out with our accordion control when we have issues as a consultant? If so please provide your contact information.

  131. XCoder says:

    Does this script work with jQuery 1.6.1?

    When I leave the page and come back, the slider is jumping rapidly. It works fine with 1.4.2, but does this strange dance under 1.6.1

    Also, any way to force it to stop after its rotated through all the slides?

  132. Luch Klooster says:

    I placed an enhanced version of the script on https://gist.github.com/1071448
    It has:
    * support for Opera browser
    * support for IE9, improved slide-number display for IE8 and IE9
    * support for skins with activeCorner (eg. Stitch)
    * pauseOnHover

  133. julio says:

    yes! something that really works! thank you so much!

  134. BigBadWolf says:

    Hi Andrea, great plugin! I have one question though that nobody appears to have asked – might it be possible to place the tab to the right of the content as opposed to the left, but keeping the same LTR movement on opening?

  135. ale_mar says:

    Ciao Andrea. Ancora i miei complimenti x il tuo script. Nessuna novità circa Opera e IE9?

  136. chemarock says:

    Gracias !!!!!! esta muy bueno tu jquery

  137. LED EKRAN says:

    THNX FOR SHARING

  138. Nathan Hall says:

    Excellent Plugin!

    Does anyone know how to select a specific slide from an outside link? I have a link on my page (Contact Us) that I would like to automatically open the Contact Us Slide in my Accordion.

    I’ve tried using the following, but no luck:
    $(‘#slide3′).activateSlide();

    Suggestions would be greatly appreciated!

  139. Foula says:

    Thanks for you efforts to put this plugin free for all.
    But this plugin not working fine with Google Chrome browser….

    I don’t know what’s wrong but it’s work fine with the other browsers including ie.

  140. Luch Klooster says:

    Hello all!

    Here my patches to solve:
    1 Opera support
    2 IE9 support

    In the .css file of your skin:
    In .easy-accordion dt
    add the line
    /* Opera */ -o-transform: rotate(-90deg);
    add -ms-transform: rotate(0deg); after cursor:pointer in /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;

    In .easy-accordion .slide-number
    add the line
    /* Opera */ -o-transform: rotate(-90deg);
    add -ms-transform: rotate(0deg); after (rotation=1); in /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

    In jquery.easyAccordion.js make the following changes:

    old line 32:
    if (jQuery.browser.msie){ dtWidth = $(this).find(‘dt’).outerWidth();}
    new line 32:
    if (jQuery.browser.msie){ dtWidth = jQuery(this).find(‘dt’).outerWidth();}

    new add after line 45:
    if (jQuery.browser.opera){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; } /* Opera */

    old lines 48 – 73:
    // ——– Getting things ready ——————————————————————————

    var f = 1;
    jQuery(this).find(‘dt’).each(function(){
    jQuery(this).css({‘width’:dtHeight,’top’:dtTop,’margin-left’:dtOffset});
    if(settings.slideNum == true){
    jQuery(”+0+f+”).appendTo(this);
    if(jQuery.browser.msie){
    var slideNumLeft = parseInt(jQuery(this).find(‘.slide-number’).css(‘left’)) – 14;
    jQuery(this).find(‘.slide-number’).css({‘left’: slideNumLeft})
    if(jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){
    jQuery(this).find(‘.slide-number’).css({‘bottom’:'auto’});

    }
    if(jQuery.browser.version == 8.0){
    var slideNumTop = jQuery(this).find(‘.slide-number’).css(‘bottom’);
    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css(‘padding-top’)) – 12;
    jQuery(this).find(‘.slide-number’).css({‘bottom’: slideNumTopVal});

    }
    } else {
    var slideNumTop = jQuery(this).find(‘.slide-number’).css(‘bottom’);
    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css(‘padding-top’));
    jQuery(this).find(‘.slide-number’).css({‘bottom’: slideNumTopVal});
    }
    }
    f = f + 1;
    });

    new: 48 – 79
    // ——– Getting things ready ——————————————————————————

    var f = 1;
    jQuery(this).find(‘dt’).each(function(){
    jQuery(this).css({‘width’:dtHeight,’top’:dtTop,’margin-left’:dtOffset});
    if(settings.slideNum == true){
    jQuery(”+f+”).appendTo(this);
    if(jQuery.browser.msie){
    var slideNumLeft = parseInt(jQuery(this).find(‘.slide-number’).css(‘left’));

    if(jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){
    jQuery(this).find(‘.slide-number’).css({‘bottom’:'auto’});
    slideNumLeft = slideNumLeft – 14;
    jQuery(this).find(‘.slide-number’).css({‘left’: slideNumLeft})
    }
    if(jQuery.browser.version == 8.0 || jQuery.browser.version == 9.0){
    var slideNumTop = jQuery(this).find(‘.slide-number’).css(‘bottom’);
    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css(‘padding-top’)) – 20;

    jQuery(this).find(‘.slide-number’).css({‘bottom’: slideNumTopVal});
    slideNumLeft = slideNumLeft – 10;
    jQuery(this).find(‘.slide-number’).css({‘left’: slideNumLeft})
    jQuery(this).find(‘.slide-number’).css({‘marginTop’: 10});
    }
    } else {
    var slideNumTop = jQuery(this).find(‘.slide-number’).css(‘bottom’);
    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css(‘padding-top’));
    jQuery(this).find(‘.slide-number’).css({‘bottom’: slideNumTopVal});
    }
    }
    f = f + 1;
    });
    ======================================================================

    This will correct display of numbers on Tabs. Please note that I removed the leading zero (I don’t like it).

    Suc6!

    Luch Klooster
    CONVENT web design and development

  141. DanV says:

    Does your accordion support IE9? Because it keeps telling me that I need to press the compatibility button in order to make it work. Thanks for the info!

  142. k says:

    thank you very much for your share spirit!

    and if possible I want to more talk with you!

    throught i write this message you could konw about my English level;yes so bad!!but l could konw you had said
    so , language is no Problem!
    if you got ths msg pls mail to me and dont reply
    thank you!!!!
    From China
    k

  143. poet says:

    Hi, I was looking for another Slidedeck because of uncusomisable reason and I finally found this plugin. It seems nice but it doesn’t work with my wordpress web site. So could you answer my questions?
    1. Can easyAccordion work with jquery 1.4.2?
    2. Can easyAccordion work with another jquery plugin like easyslider?
    I used wp_enqueue_script but I couldn’t let it work. I’m about to give up…
    Thanks in advance.

  144. PaulM says:

    That last comment has had all the code removed :/

    Will it reappear once it’s been moderated I wonder?! If not how do I post my code on here anyone?

  145. PaulM says:

    Excellent Plugin!

    For anyone wanting to open a specific pane when linking to the page the slideshow is on, the following worked fine for me:

    the HTML for the link will be something like this:
    Your Link Text

    the HTML for the pane you want to select will be something like this:
    Your Pane Title

    then in the jquery.easyAccordion.js file add the following line, just under the ‘jQuery.fn.findActiveSlide’ block:
    Pane2 = function () {jQuery(“#pane2″).activateSlide();};

    Now when the link is clicked it will open the page as normal but with the slider set to whichever slide matched the id you specified in the javascript function (“pane2″ in this example).

    I actually have four panes, so my various bits of code look like this:

    LINKS:
    Your Link Text
    Your Link Text
    Your Link Text
    Your Link Text

    PANES:

    Pane 1 Title
    Pane 1 Content
    Pane 2 Title
    Pane 2 Content
    Pane 3 Title
    Pane 4 Content
    Pane 4 Title
    Pane 4 Content

    JAVASCRIPT:
    Pane1 = function () {jQuery(“#pane1″).activateSlide();};
    Pane2 = function () {jQuery(“#pane2″).activateSlide();};
    Pane3 = function () {jQuery(“#pane3″).activateSlide();};
    Pane4 = function () {jQuery(“#pane4″).activateSlide();};

    Works fine for me across all the browsers. Let me know if it works for you guys :)

  146. Rauf abid says:

    Wow Wow Wow, gud work, love it…………….

  147. Marcos says:

    hello! its pretty cool jquery! I tried to use on my site http://www.marw.info and internet explorer was not cool! How do I get? I’m a beginner and I live in Brazil! hug

  148. Kamran Aslam says:

    I have got some weird problem going on in IE9. The complete slide bar is not clickable. Dose anyone have any fix for this?

  149. Benjamin Barber says:

    Hi Andrea nice plugin i was wondering how i can get the first element in my accordion to close when i click on it. Right now it only closes the second element in the accordion if i click on the first element. I was wondering if there is any way i can close the element when i click on the acatual element and not the one in front of it

  150. joe says:

    this is a nice script but its very hard to install help pls

  151. Elie says:

    Hi,Andrea.

    I just came across your JQuery horizontal plugin. You did a FANTASTIC job creating this. Thank you so much.

    I’m hoping you can shed light on an issue I came across.

    I downloaded/unzipped the plugin to my Win7 box running IE9. I ran the included index.html file and immediately received the prompt:

    “Do you want to run unsigned scripts or ActiveX controls?”

    Clicking the “Yes” option allows your demo to run without problem. Otherwise, it doesn’t.

    If I go into IE9′s Tools -> Options -> Advanced -> Security settings and check the “Allow unsigned ActiveX scripts to run” box, your demo then runs without being prompted.

    What is strange about all this is that if I simply go directly to this web site and then run your demo link, I receive no prompting.

    So what is different between the demo included in your unzipped file that I download versus running the exact same demo directly from this web site?

    Thank you.

    Elie

  152. Jazz says:

    Great Work! I like this!
    I was wondering if it’s possible to get the tabs of each slide to be positioned across the bottom of the slide rather than to the side of the slide.

    Thanks!

  153. Alfin says:

    It’s a great plugin, CSS & jQuery written beautifully in a simple way. Thanks very much for sharing with us.

    For those wondering how to make the auto start to resume after clicking on a slide, try copying the code from the click function, and paste them after clearTimeout(…..);

    timerInstance.value = setTimeout(function(){
    accordianInstance.rotateSlides(interval, timerInstance);
    }, interval);

    Not pretty but it works, perhaps anyone has better way of doing it, I’m open to suggestion…

    Cheers.

  154. Sudipto karmoker says:

    Thanks, a lot to you. Actually, i have already spend a day for a accordion plugin. but, could not arrange that. However, i really giving thanks from my heart for your this kindness. If i would have any money in paypal i would pay u.
    Thanks.

  155. MD.Rokun Uz Zaman says:

    Thank you very much. What kind help do you give I never tell you. This is really good content slider I am so happy to get it. Thank you very much..

  156. Dario says:

    HI,

    is there a Way Out to adapt your super cool jquery accordion to joomla 1.5 framework as a simple plugin?

    Thanks!!

    Dario

  157. Jeffrey says:

    nice! Do you have an option to use regular “next” and “previous” arrows instead of the accordion style?

  158. jonnyjaniero says:

    glad i found this. keep up the good work.
    made a small donation, dont get excited, you will not be able to retire just yet :)

  159. ale_mar says:

    Hi everybody!
    Is there anyone who managed to fix the IE9 issue? Vertical bars seem not to be clickable… Elements are rotated vertically well, but something got wrong since IE9 came out. :(
    Speriamo bene! Hope you could fix it, thanks since now!

  160. Optimise Web says:

    Reminds me of the once popular Mootools accordion menu. Looks good! Might use it :)

  161. Roco says:

    Hello

    Lovely plugin.

    Got one Q though.

    I don’t want an animation on the first load.
    is this possible ? If yes, how ?

    Thanks for the effort.

  162. andrewizbatman says:

    I love the accordion you have here and it almost completey covers my needs. The only thing i’d like to be able to do is have a slide open depending on which day it is. So for example, if I go to a website on Monday, slide 1 is open. If I go to the website on a Friday slide 5 is open. Is this possible to do? My knowledge of jQuery and javascript is limited at best. But im learning! :)

  163. megan says:

    Thank you! Thank You! I’m glad to see an alternative!

  164. How can I create a wordpress plugin version of this awesome content slider and would I be able to have the slides go horizontally (other direction of the demo)? I would be more than happy to donate to anyone that could help me out with this quickly please.

    Thanks and God bless,

    Joshua

  165. Maggie says:

    Thanks for this great plugin!

    One little question: Is there a way to open the page with all panels collapsed?

    Thanks,

    Maggie

  166. Gregor says:

    Hi Andrea,

    very nice plugin!

    I added a slideSpeed setting in my version because I wanted slower slide transitions. As far as I can tell, one only has to extend the .animate functions in jQuery.fn.calculateSlidePos with the slideSpeed setting, and the value of the setTimeout function. Maybe a generalfeature for the plugin?

    Thanks!

  167. tutomaster says:

    Your site is very nice, congratulations. Can I use Easy Accordion with WordPress ? Thank you.

  168. Thank you for this great accordion. I’ll download it and donate for it after my Easter hollyday. Keep doing a great job and Happy Easter!

  169. Pushpak says:

    Hey there,

    a really great plugin to have :) great work.

    But seems the current version on your site doenot work well with OPERA..

    I Got the fix from the comments on this page and it has been found on december 2010.

    But yet u havent updated the plugin ….. Took some hours just to fix an issue..

    PPls like me also are suffering from same issue and will suffer if u dont update it soon….

    U just need to change a bit line of code….

    So… Just Do IT.. the Nike way :p

    Thanks

  170. Lyon says:

    Is it possible to load an item programmatically? I have tried setting the class of the item to active but this doesn’t seem to help.

  171. Matthias says:

    Thank you for the plugin, i solved the problem in opera:

    .easy-accordion dt {
    -o-transform: rotate(-90deg);
    -o-transform-origin: 150px 150px;
    }

    • Maggie says:

      Matthias:

      I was very happy to see that you had managed to solve the problem in Opera. I copied the script you wrote and it doesn’t work. The accordion expands horizontaly but the slides should be in a vertical position; so it is not rotating as it should.

      I believe I have the latest version of Opera. How can I solve it?

      Any help in this would be greatly appreciated.

      Thanks,

      Maggie

  172. kyle jennings says:

    Im having a problem in IE9. The accordion looks right (mostly) but it doesnt function at all. Im not quite sure why either, it works in IE7/8 but not nine.

    The site in question is tattoos.heroku.com

    heres a screen shot tho: http://i.imgur.com/ttXC7.png

    • kyle jennings says:

      NVM got it. I didnt see the post about the filter up top. Thanks! this plugin is amazzzingggggg

  173. @TanyaDesign says:

    I finally got a moment to play with this. THANK YOU SO MUCH for releasing this horizontal bar. I have been struggling for 4 months for a client solution and this is absolutely perfect. Its easy to use, you explained every eventuality I ran into, and its beautiful. Thank you again. See you this summer!

  174. Hello Andrea,

    nice work and thx for sharing it.

    So now i realy need your profession for a little customization.
    I only want that another div box is changing the picture when the accordion switch the content.

    Can you help me with this?
    I am looking forward and of course i will pay for it.

  175. Pragnesh says:

    hi,
    thanks for sharing nice plugin.
    how can i disable the tab?

    Thanks
    Pragnesh

    • Luiz Gonzaga says:

      Hey, Pranesh! Did you find out how do disable a tab?

      It really is handy to have a way to do this. Example: the acoordion is multi-step thing and you just wanna the user to go to the next step (tab) under certain conditions.

      How to to that?

      Thanks and congrats for the great work!

  176. cmegown says:

    Andrea! Fantastic plugin, super sexy and easy to use! One problem I’m having (that a lot of other who have posted have as well) is that in IE9, the clickable area on each tab is very small. Any hints/tips to fix this? Any help would be very much appreciated!

    Thank you!

    • cmegown says:

      **edit

      below the two lines of css that transform the tab in IE:
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

      ADD this below EACH of those lines:
      -ms-transform: rotate(0deg);

      this at least makes the entire tab clickable…the slide number is still butchered however

      • Lyon says:

        you will need to wrap the text in the dt tag in a div with a width of 100% for this to work properly

      • Granados says:

        Thank you so much, I had this problem with IE, and now it has been fixed thanks to your suggestion.

  177. Liz says:

    I have now implemented this on my site and I’m sending you a donation. The Oper fix from Nicholas Leeson above worked for me. Thanks. Liz

  178. Liz says:

    I am working on a site now and am very disappointed with my $99 SlideDeck. I can’t change the height of the dl container! Thanks for doing this.

  179. Sjoerd says:

    Very nice work Andrea! I was wondering, did you notice that in IE9 only the top of a tab has a link area?

  180. pallavi says:

    hi! Love this plugin, have been looking for a while for a simple jquery accordion. i was wondering if there’s a way to make the slides transition on mouseover rather than on click and if so, how?

  181. Jack says:

    Hi , i’m happy can looking for this plugin .May i know can i plugin Easy Accordion to my wordpress post ?Thanks you.

  182. Star says:

    Hi
    I want to ask that how i can remove the slide number from the heading of each slide

  183. Aaron says:

    Hey I thought this code was very interesting. I have it auto-scrolling through three slide. I was wondering if you would have a code that can stop the auto scroll after the third slide?

  184. Nibbler says:

    Woow! Thanks a lot for this script. I am going it to use it in my new website. Very kind of you to share this!

    Respect!

  185. bobby tuck says:

    Again — many thanks. Any plans for an update to include the code changes above?

  186. hasan says:

    WowwwwwExcellent Work!!!!!!!!!!!!

  187. xue says:

    How do i restart the autoStart. Once the user click to the accordion once? Because currently once the user click the accordion title then the auto sliding will stop

  188. Xavier Zabala M. says:

    Hi, thanks for your plugin is awesome.

    For opera browser to fix vertical position of tabs, in the css add this:

    html>/**/body .easy-accordion dt {
    margin-left:-270px;
    -o-transform: rotate(-90deg);
    -o-transform-origin: right top;
    }

    Thanks!

    Xavier from Ecuador.

    • bullchicken says:

      I had to adjust my margin amount but this works great for opera! Didnt seem to break it in any other browser either.

      For the ie9 issue, it seems that the area that is link clickable is the height of the unrotated image (rotated images width) Could ie be rotating the image but not the link area?

  189. Sarah says:

    How easy is this to orient vertically?

  190. Morten V says:

    I figured it out!!

    The slide.jpg ofcourse……

  191. Morten V says:

    Love jQuery Easy Accordion!!-!

    I’m gonna make a black’n'orange site.
    But i cannot figure out how to make the inside of the Accordian black!
    Everything else was easy, new tabs, new colors for text, background black.
    But when i try to shift the inside the text goes transparent and only when the active tab is in place i stops being transparent?

    Please help, when this works donation is on the way, because this is the entire base for my website……

  192. Tom says:

    How about a vertical option?

  193. Rick says:

    This looks extremely promising for what I want to do! Kudos. Only issue I have is during the animation I’m getting a momentary text bleed, and I can’t seem to figure out why.

  194. Andy says:

    Hi Andrea, great plugin. I seem to be having an issue with google chrome, the content doesn’t seem to be showing up correctly for some reason – http://www.andystaplesdesign.co.nz/gmds.html. Has anyone else got any advice?

    Also is it possible at this stage to have different images for the tabs? I’d be complete if/when you can…

    Thanks

    Andy

  195. Brent says:

    Great plugin. Does it support dynamically adding new slides via jquery or javascript?

  196. bullchicken says:

    I just tried this(my version and demo version) in IE9 Release Canditate and the link area to open a closed slider is really tiny, it seems to be the height of the text if it wasn’t rotated. Turning on compatability mode seems to fix it, but using the compatability mode meta tag does not.

    Any ideas?

    • bullchicken says:

      Oh, and it is completly busted in Opera 11 too :(

  197. Schuyler says:

    This is great! Plus a very flexible script. If I want to dynamically load a pane rather than set one of the tags to the “active” class this line works really well in conjunction with a unique ID on my desired pane:

    jQuery(“#mydesiredpane”).activateSlide();

    I had to fix one small JS error by adding

    if (typeof noMoreActiveID != “undefined”) {

    before

    if(activeID < noMoreActiveID){

    in the activateSlide function as a result of this.

  198. Steve says:

    Pausing the animation on mouseover? Resume when mouseout?

    Would be a wonderful update or if anyone else has tackled this and would like to share that would be great!

  199. Shuaib says:

    Huhhhhh….. Paypal doesnt support my country. woulod have donated

  200. Jauia says:

    Thank you for share..

  201. Steve says:

    Another request for pausing animation on mouseover the of the accordion – any ideas on how to do this???

  202. Asa says:

    I’ve added a couple of features to your plugin, which others might find useful. Including making the plugin chain-able. If you’re will to post it to github or bitbucket I’d be happy to send the small additions for your review. Great plugin Thanks

  203. Becca says:

    Truly fantastic. I’m using it for an inclass project. I was interested in having it span the entire page, and it can, but whenever the window is resized it will not reload/draw. Is there anyway around the absolute positioning of the accordion?

  204. Trivikram says:

    Hi, Nice work. How Can I remove Number on the tabs.

  205. Andrei Iarus says:

    It seems it doesn’t work that on Opera [tested on v.11]

  206. Andrei Iarus says:

    You have a small error in the code, meaning in IE an error occurs.

    You have:
    if (jQuery.browser.msie){ dtWidth = $(this).find(‘dt’).outerWidth();}

    It should be:
    if (jQuery.browser.msie){ dtWidth = jQuery(this).find(‘dt’).outerWidth();}

    NICE JOB! Thanks for SHARING.

  207. Raymond Lopez says:

    This is the kind of work that shows passion! Your code is clean and is simple to use/modify. I was an intern for digital telepathy(creators of Slidedeck) for a few months and recently emailed them to see if I could get a discount on slidedeck and no luck. I’m excited to see this project of yours alive! I’ll promote in as many place I can! Thank you!

  208. Tim says:

    Is there any way I can make the Height fluid so it would match the height of the content? Currently the box is too small for the content i’m trying to display.

  209. bullchicken says:

    Thanks for the great code!
    2 things I want to do with it but are unsure. Is it possible to have the inactive slides have different images(slide-title-inactive-1.jpg)? And how would I go about having an image be at the bottom right of the divs instead of floated to the right of the text?

  210. andrei says:

    Nb – move the class of “active” to whatever dt you want to be the default open view.

  211. bobbytuck says:

    This is fantastic! I’ve been looking for a Slidedeck-like slider — and this fits the bill. Do you have any updates planned? Works great.

  212. rodskin says:

    Hi, Very nice work. Unfortunatelly, I was looking for the same thing but with .

    But very great work by the way

  213. nb says:

    How to change default slide screen?
    Can I change this?
    thank in advance

  214. Ramon Pose says:

    is it hard to integrate a vertical scroll function in each slide?

  215. Warren says:

    Just wondering how one would select a different slide to start with when the page loads?

    Thanks so much. It is a great accordion!

  216. Damien says:

    This is the single greatest accordion plugin ever made. Thank you for making such an excellent plugin!!!

  217. Jireck says:

    Thanks for this great plugin

    I use it on my site…

  218. Andrei says:

    Sorry I can’t insert a piece of html-code of my page. I meant text between “dd” tag

  219. Andrei says:

    It’s seems like strange questions, but is there any possibility to preserve some sections (bla-bla-bla…) of the menu from animation? The problem is that few sections of our site have no child documents and we want to keep them static in menu.

  220. Hey Andrea! I love this accordion plugin! Is there a simple way to make it work vertically? This thing is so lightweight and easy to configure, it would make an excellent option of sidebar navigation! If it’s not easy to change to vertical by the user, would you consider that as an option for future improvement?

    Cheers,

    Scott

    PS – I really enjoy all your blog posts on web development!

  221. Armen says:

    Thank you for a great script. I tried to put it into the Google gadget and it worked just fine in Chrome and Firefox. But in IE (I tested it on IE7) it works very strange. Here is the webpage where I tried it – http://www.gorod.am. Can you please have a look and tell me if you have any ideas on fixing it?

    Thanks a lot,
    Armen

  222. Darryl de Jessu says:

    hi,

    I’m thinking, is it possible to change the background image different from each other for inactive and active panel. hope you would consider it.

    regards

  223. Donald says:

    Thank you very much. Very easy to implement.

    I have one question though. I was wondering where in the easy-accordion jQuery I can target the CSS so I can add an arrow (extra) image to the when it is active active.

    In the slidedeck i found this class in the CSS:

    .skin-slidedeck dl.slidedeck .activeCorner {
    margin-left: -6px;
    background-image: url(‘corner.png’);
    width: 12px;
    height: 25px;
    }

    From which I’m sure it’s triggered in the plugin somewhere, but since slidedeck it is encrypted (as mentioned in this article) I can’t figure where to implement it in the easy-accordion jQuery

    thank you in advance

  224. mercadder says:

    Great work! I would like to implement this slider in a wordpress blog. But I am not pretty sure how to do it correctly. Can anybody help me?

    Andrea, I follow you!

    Thank you.

  225. schua_ozven says:

    Hi Andrea!

    First of all, I would like to appreciate your website, it’s so nice :) Thanks for sharing this jQuery plugin to us. I would be glad to include this to my portfolio.

    I am a web designer at Ozven Graphic Design Studio. I would like to ask, if you know Javascript language. :)

    Thank you once again!

    P.S. ~You’re the only one who gave a fully detailed process of a self-made jQuery plugin.

    cheers!

  226. Eric Russell says:

    Does your API allow using external controls for opening a certain slide number?

  227. NK Smith says:

    Great job on the plugin! Just one suggestion, which was asked before I think..It’d be really useful to a lot of people if you could make a version with vertical sliders. SlideDeck has this feature, but only on the $99 Pro version of course.

  228. Dave says:

    Thanks Andrea!

    What an awesome job you did. It works great and I prefer this one over other Accordion slider.

    Thanks for sharing :)

  229. Roger says:

    Hi,

    What an excellent piece of work. Great stuff. Thanks for sharing!

  230. jolly says:

    Hello,

    the plugin ist great and everything works fine so far.

    I am not a JavaScript Expert, but i would like to add next-/ prev-Buttons to the accordion in order to scroll through the vertical slides. Could anyone please help me? That would be great!!!

    Bwest regards,

    Jolly

  231. YongJun-WEI says:

    Thanks you,this Plug is good to study for me

  232. Yes, that fixes opera issue.

  233. Sa'eed says:

    I am using IE 7, there is one small bug, which is that the hovering is not working.
    On FF 3.6, it is 100% perfect. Could u help me in IE 7 hovering issue.

    Thanks in advance

  234. GM says:

    BTW, where do the animal icons come from?

  235. Gintaras says:

    Amazing work! Just a quick question, how to make active slide second slide in the menu? I have four slides in the menu and want two slides in one side and two in the other with the content of second slide in the middle?

    I’ve tried to edit code however due to my very little knowledge of jquery I failed :D Would really appreciate your help.

  236. Peter says:

    Hello!

    Is there some easy way to add vertical slides within each area?

    Thanks and best regards from Slovenia!
    Peter

  237. Basilio says:

    Hi, nice plugin!
    I added a few lines of CSS to support Opera 10.5 +

    .easy-accordion dt{
    /* Opera */ -o-transform:rotate(-90deg);
    /* changes with the height of the box */ -o-transform-origin: 183px 182px;
    }
    .easy-accordion .slide-number{
    /* Opera */ -o-transform:rotate(90deg);
    }

    This works for me :)
    bye

    • Donald says:

      With height of the do you mean the height of the entire accordion?

  238. Tim says:

    You may want to change your browser support such that IE6 is not included. Even your demo does not work in IE6. The panels lose their borders, upon clicking, and in some cases they disappear all together.

  239. bartosz says:

    it’s possible to work in opera?

    • bartosz says:

      css:
      .easy-accordion dt { /* Opera */ -o-transform: rotate(-90deg); }

      js:
      if (jQuery.browser.opera){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; }

      work in opera 11.

  240. Simon says:

    How about a pause on hover function? As if you put a link in a slide then it can be whised away before the user can click on it.

    • Sammi says:

      Simon, did you ever figure out a pause on hover solution? I need to do the same thing and can’t seem to figure it out. Anyone have any suggestions?

  241. Glen says:

    I had to add this var noMoreActiveID = 0 for IE. When initially loading page and mousing over first dt title IE produced a javascript error saying noMoreActiveID undfined.

    thanks

    • Sherna says:

      Hi, I was wondering if someone could please help??

      The accordion seems to break in IE, it gave me an error that in the easyAccodion.js file line 32 the ‘object doesn’t support this property or method’

      so I uncommented out and the all of them slide at once and all spaced out and doesn’t float to the left.

      Did anyone have this problem?

      thanks :)

      • RLL says:

        Sherna, I encountered the same error, and the problem was caused by a conflict with another jQuery/Javascript plugin used on the page. In my case, there was a jQuery.noConflict() function call which caused the $ reference on line 32 to break. I replaced “$” with “jQuery” and all was well. As a novice, I don’t know why Andrea might have used $ in a single instance rather than jQuery (I assume it was intentional?), but making the change didn’t seem to cause any problems for me. Alternatively, I could have removed the jQuery.noConflict() call in the other script but decided the jQuery/$ swap in Andrea’s code was safer. Incidentally, Andrea, I dig both the plugin and the site. You are a professional! Ciao.

      • Sherna says:

        Thank you soo much RLL, that worked…I would have never caught that with my eye :)….Thank you so much again.This slider is awesome :)

  242. GM says:

    Thanks for making available. If I use it on a commercial project I will donate and give you credit :) I assume this is released under MIT?

    Thanks.

    GM

  243. Theresa says:

    hi, is it hard to make this slide vertically instead of horizontally?

    • Me says:

      Thank God it’s horizontal and not vertical! There are so many vertical accordions available, and barely any horizontal one. Finally this is a nice one that’s working great.

  244. Max says:

    Hello Andrea;

    Greetings from San Francisco!

    Very nice work!

    How to make the content of the slide FLUID?

    Any pointers appreciated!

    Max…

  245. Jordan says:

    In Chrome only the slide numbers are clickable, the rest of the title bar does nothing. Anybody know a way to fix this?

    • alemar says:

      Place here some code… :)
      @Nicholas: I tried your combined js+css solution, but… nothing happened. or better… it got worst! :(

  246. Glen says:

    I have the accordion in a body #container. I have a problem in Firefox when setting both width and margin:auto in my #container (to center it on the page) the accordion dd content can be seen scrolling under (behind) the dt’s through a 1 pixel gap to the right of each vertical dt. It only happens when both width and margin:auto are set, If I only set one of the them ie. width or margin:auto, it works fine. I cant seem to work this out.

    I tried it with your demo and get the same problem. Is it just me or are other people having this problem? Thanks for the script as it is fabulous other than this little issue Im experiencing.

  247. Good News!!!

    This plugin now works with Opera!!!

    Opera v11.00 has just been released.

    In order to make this plugin work, you’ll need to adjust both the jquery.easyaccordion.js file and the css in your head tags, and make it similar to the conditions of safari and chrome.

    For example,

    Step 1.

    Within the jquery.easyaccordion.js file, add in a line that is the exact same as safari. For example:

    // ——– Fix some weird cross-browser issues due to the CSS rotation ————————————-
    if (jQuery.browser.opera){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Opera */ }

    Step 2.

    Within your css, add in -o-transform: rotate(-90deg) and -o-transform: rotate(+90deg) in the appropriate lines. For example:

    .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}

    .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Opera */ -o-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}

    Cheers!
    Nick

  248. Awesome..Thanks for sharing…

  249. Jorge Adolio says:

    I was able to combine this feature with ExtJS.

    However, is there a way that I can check which section is active during user’s interaction with it?

    Any suggestions or recommendations are welcome

    Cheers

  250. achu says:

    Dear,

    I rally appreciate you work it seems great. I wish to use this plugin on my personal blog but i don’t have any programing skill no jquery no css not at all i’m not a computer programmer i just using wordpress plugins just install. how can i install this pluggin just like the ordinary plugis could you help me please

    Thank you,

  251. Josh says:

    Don’t know if anyone has had this problem but thought I’d post it here to help out. In firefox My drop-down navigation was dropping behind the accordion so you coudn’t see it, but the fix was easy, just by wrapping the accordion in a div and adding z-index of 0 in the css fixed it.

  252. Rohan Afandkar says:

    Good One Buddy. Good Work

  253. Good one… Thanks for the link.

  254. Andrei says:

    Great plugin!
    Is there a way to get a link outside of the accordion to target/animate one of the slides to a specific view?
    (example: clicking a logo will restore the view of the accordion which i have defined with “active” on the dt).

    Thank you!

    • Nathan Hall says:

      Hello,
      Have you found a solution for this?

    • Nathan Hall says:

      I’ve been trying to do the same. Please let me know if you have gotten this to work.

      Thanks!!

  255. Joy says:

    Hi!

    Like others here I’m also having trouble with opera – but none of these fixes have worked for me… any ideas!!?? HEEELP!!

    http://region8water.colostate.edu/accordian1.shtml

    /* UNLESS YOU KNOW WHAT YOU’RE DOING, DO NOT CHANGE THE FOLLOWING RULES */

    .easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
    .easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
    .easy-accordion dt,.easy-accordion dd{position:absolute}
    .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
    .easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
    .easy-accordion dd.active{opacity:1;}
    .easy-accordion dd.no-more-active{z-index:2;opacity:1}
    .easy-accordion dd.active{z-index:3}
    .easy-accordion dd.plus{z-index:4}

    /* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */

    dd p{line-height:120%}
    #accordion-1{width:680px;height:400px;margin:10px 0 0 10px;background:#fff}
    #accordion-1 dl{width:680px;height:400px}
    #accordion-1 dt{height:36px;line-height:34px;text-align:right;font-size:17px;font-family:Tahoma;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#085284}
    #accordion-1 dt.hover{color:#25691c;}
    #accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
    #accordion-1 dd{padding:0;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:2px}

    #accordion-2{width:680px;height:400px;margin:10px 0 0 10px;background:#fff}
    #accordion-2 dl{width:680px;height:400px}
    #accordion-2 dt{height:36px;line-height:34px;text-align:right;font-size:17px;font-family:Tahoma;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#085284}
    #accordion-2 dt.hover{color:#25691c;}
    #accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
    #accordion-2 dd{padding:0;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:2px}

    Thanks :))

    Joy

  256. Buzzinho says:

    Hi, thanks for the code.

    When you click on a header it stops rotating. Is there any way of stopping it if you click on the content ? I have a video in one. When you click to play it the video starts but it keeps rotating.

    Thanks in advance.

  257. Banjo Drill says:

    Thanks so much! I’ve been struggling with building my own horizontal accordion for a while now…this helped me finally understand.

    Cheers,
    Banjo Drill

  258. very thanks. really good sharing.

  259. segmeant says:

    Looks like some of my code is gone. I wrapped it all in a <code> </code> tags but I guess that didn’t work. any help with that I will correct things and repost. Thank you.

  260. segmeant says:

    Does anyone know how to add the data list to a wordpress out put of 3 post by category?

    I made a template page for this with this code. My category is 7 in this example. I’m not sure how to add the data list tags in there to get it to work with Easy Accordian. I’m using a rewind post because the my header has the main loop in it.

    =======

    have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID; ?>

    cat_name; ?> | <a href="" rel="bookmark" title=" ">


    =======

  261. Abel Nunez says:

    I found the Opera fix, it’s the same as the one for Safari and Chrome.
    under jquery.easyAccordion.js place the following in the “Fix some weird cross-browser issues due to the CSS rotation” section:

    if (jQuery.browser.opera){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Opera*/ }

  262. widianto says:

    hi, just wonder, do you write a wordpress plugin for this awesome script? btw i agree with you, sd sucks!

  263. ale_mar says:

    Hi Cima!
    Scrivo in italiano o in inglese?
    Well… first of all, many thanks for having shared your script, very impressive!
    Just one question… Opera, it doesn’t seem to support vertical rotation, or better… it shows horizontally what should be vertical, such as the tabs next to the sliding content DIVs.
    Is there a feasible solution to fix it or not?
    Thanks & bye!

  264. Hyper_boom says:

    Does anybody have a fix for users that have firefox under version 3.5?

    I installed version 3.0.19 and the panels with the titles on do not rotate the 90 degrees. Help!

  265. siming_ke says:

    good,it’s a good view and experience

  266. sindbad says:

    Nice work, it looks very great. I have one question: how can I show the title of the slide normal, not rotated? I want to add the title and some description, for example: Title = “About Us” and Despription: “Find more about us and our great work”.
    Thanks

  267. anilina says:

    if i click on any slide auto slide stops even i set auto-slide true. is there anyway to keep running slide show even click on any slide.

    please help me in this…..

  268. hamideh says:

    thanks it is nice and fantasy,
    but is it possible to change the direction? i mean the content box open at the left side of main tabs?

  269. sheirf saleh says:

    I wanted to integret a jquery accordine to a project powered by wordpress
    it works only in custom templates – but when i try to apply the accordine to my posts it doesn’t work .??

    u see what i’m spkin about ?
    and i love ur accordine iam gona try it u think it is gonna work inside of a post ?.

  270. ArsenalTech says:

    if i click on any slide auto slide stops even i set autoslide true. is there anyway to keep running slide show even click on any slide.

  271. Ari says:

    Thank you very very much! Nice work! It works great on GNU Linux Ubuntu using Chromium and Firefox. Saludos desde Argentina

  272. Babak says:

    Thanks a bunch for this awesome plugin, this is exactl what i was looking for.
    i just wonder if the plugin supports RTL? i want the items to open up from the right? is it possible or how can i add this option to the plugin?
    thanks in advance :)

  273. nico says:

    hey.. sorry ’bout reposting.. but does really nobody have a similar problem like on http://grossenbacherag.ch ??? I can’t get rid of the content-preloading OVER the maincontent underneath the accordion (right now all the accordion-content-images are loading in a series right over the text below..which doesn’t really look neat;)

    thx in advance.
    nico

  274. jim says:

    Can you help with how to make the accordion larger? I just made it taller, and there’s something funky with the height of the blue bar handle things. At first I thought I could just stretch the images, but now I’m not so sure.

  275. Coffee says:

    I absolutely cannot get this to work in IE7 once I add to an existing page. Alone in its own html page it’s fine, but once I try to add it into a in my .php page it doesn’t work. It just shows all the slides on top of one another. Any suggestions?

    • Damien says:

      @Coffee
      It appears that the existing page’s styles affect the accordion.

      To have the existing page and accordion completely separated, you might consider putting the accordion in iframe. (that’s what I’m gonna do if I can’t find the proper Opera-fix)

      D

  276. Jean-Michel says:

    css:

    .easy-accordion dt{
    margin-bottom:0;
    margin-left:0;
    z-index:5;
    /* Safari */ -webkit-transform: rotate(-90deg);
    /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;
    /* OPERA */ -o-transform: rotate(-90deg); -o-transform-origin: 10px 0px;
    /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    cursor:pointer;
    }

    .easy-accordion .slide-number{
    position:absolute;
    bottom:0;
    left:10px;
    font-weight:normal;
    font-size:1.1em;
    /* Safari */ -webkit-transform: rotate(90deg);
    /* Firefox */ -moz-transform: rotate(90deg);
    /* OPERA */ -o-transform: rotate(90deg);
    /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }

    jquery.easyAccordion.js:

    // ——– Fix some weird cross-browser issues due to the CSS rotation ————————————-

    if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ }
    if (jQuery.browser.mozilla){ var dtTop = dlHeight – 20; var dtOffset = – 20; /* FF */ }
    if (jQuery.browser.msie){ var dtTop = 0; var dtOffset = 0; /* IE */ }
    if (jQuery.browser.opera){ var dtTop = dlHeight – 10; var dtOffset = – 10; /* opera */ }

  277. Andy says:

    I managed to get it working on opera with jquery 1.4.2 by putting this in my css

    /* OPERA */ -o-transform: rotate(-90deg); -o-transform-origin: 10px 0;

    and for jquery

    if ($.browser.opera) {
    $(‘#accordion dt’).css({‘margin’:’268px 0px 0px -10px’});
    }

    basically the margin top pushes the button down to the bottom.

    • Damien says:

      @Andy : Are you using a background-image in your accordion dt? I get the elements positioned perfectly, but the remaining problem is the DT’s bacckground-image that crops from left and bottom exactly as many pixels as the parent element’s margin is.

      The remaining Opera-problem is:
      If #accordion has 15px margin, there is 15px missing from dt’s background-image.
      The DT is has correct size and position, but the background-image does not render.

      With just background-color everything works fine, but my layout is based on that background-image…

      D

      • I see this problem too, with respect to the background images. Also, I can get the elements lined up perfectly for one of the accordions, but for some reason my other accordion on the same page will not have the elements lined up perfectly. For the moment I’m at a loss as to why.

  278. Al says:

    This is awesome!!! Thank you for sharing!

  279. Zeb says:

    I saw sidedeck too, at the beginning of the year, but a hundred dollar was way too much.

    Good work!

    Bravo, ottimo lavoro.

    Zeb

  280. Damien says:

    Thanks for the Opera fix. I got the accordion working in my skinned accordion element with Opera by tweaking the number 125. After successfu tweaking I noticed that there still is on Opera-problem left: the element only works if it is positioned the top left corner of the page.

    If I add 20px padding to body, or create accodrionContainer div with any border or margin, every possible combination possible affects on the accordion elements causing the layout to explode.

    Is there a way to prevent the child elements from adapting the accordion’s parent elements styles?

    D

  281. Charles says:

    Hi. Nice Script.

    It doesn’t seem to work when I use it in a JQuery Modal Window like Fancybox (fancybox.net).

    Is there anything I can do to get this to work in that situation?

    Regards,

  282. Eddie says:

    @Andrea: I have a question….

    I need my instance to auto-adjust its height, depending on user’s screen resolution. I was able to write an extra jquery step that works on the outer border, but headings (DTs) and content boxes (DDs) do not comply.

    URL is http://www.3ddie.com/sandbox/v2

    Any thoughts?

    Thanks, Eddie

  283. Eddie says:

    @Woody: try commenting out the part about the 125px margin change. That may work only for my instance.

    If your headings are still off-kilter (as mine were), put it back and try changing the 125 to different numbers and see what lines them up.

    Your heading widths and font sizes may also affect this.

    Good luck!

  284. Jesse says:

    Hi! Thanks for this, I too was looking for a good alternative to slidedeck! Is there anyway to slow down the speed of its scroll across? I slowed down the time it pauses on a single slide, but I am looking to slow down how long it takes to cross the screen. Thanks!

  285. Zach says:

    Hi, how can I link back to a certain slide externally?
    Thanks

  286. daniel says:

    Thanks for this jquery plugin andrea, i do not use it in some site now, but i modified it a bit to work on wordpress.

    • How did you modify the plugin to work with wordpress?

  287. woody says:

    sorry but its not well in opera,

    i copy ur css ,
    and i dont know i must put this code

    if (window.opera){
    $(‘#accordion dt’).css({‘margin’:’125px 0px 0px -125px’});
    }

    which file. and which line?

    utility.js
    jquery.easyAccordion.js

    thanks

  288. Eddie says:

    @Andrea (and Woody): Thank you SO much! Working in IE7/8/don’t care about 6, FF, Safari, but not quite 100% in Opera 10.63.

    Here are my fixes:

    – CSS –

    .easy-accordion dt{
    margin-bottom:0;
    margin-left:0;
    z-index:5;
    /* Safari */ -webkit-transform: rotate(-90deg);
    /* OPERA */ -o-transform: rotate(-90deg);
    /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;
    /* Future browsers */ transform: rotate(-90deg);transform-origin: 20px 0px;
    /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    cursor:pointer;
    }

    .easy-accordion .slide-number{
    position:absolute;
    bottom:0;
    left:10px;
    font-weight:normal;
    font-size:1.1em;
    /* Safari */ -webkit-transform: rotate(90deg);
    /* OPERA */ -o-transform: rotate(90deg);
    /* Firefox */ -moz-transform: rotate(90deg);
    /* Future browsers */ transform: rotate(90deg);
    /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }

    – JQUERY –

    if (window.opera){
    $(‘#accordion dt’).css({‘margin’:’125px 0px 0px -125px’});
    }

    /*
    NOTE: JQuery part is for my own instance of EasyAccordion; your mileage may vary. Wildly.

    ALSO: This did NOT fix Opera Mini for mobile phones b/c this browser’s implementation of JS is extremely limited (e.g., little to no AJAX/JQuery).

    My current solution ~ again, your mileage may vary ~ is to use a PHP mobile browser detect/redirect found at http://http://detectmobilebrowsers.mobi/. (NOTE: This script is free ONLY for non-commercial use!) Tested it on Opera Mini on iPhone to redirect to Google -> success. Will most likely redirect it to my Section 508/accessible/users with disabilities version, since that will be straight XHTML anyway.

    Hope this helps you both! :)
    */

  289. Sansel says:

    Hi, I wanna slide show neither horizontal nor vertical, how can I do this? Thanks

  290. woody says:
  291. woody says:

    Hello,
    there are problem in opera , the columnar text show as horizontal , any way to fix it,

    regards

  292. Laetitia says:

    Hello guys ?

    It’s great to see everyone happy in hear but could you please take a minute to answer me ? Andrea ? is there any ways I could install that properly ?

    Again, thank you for your answer (I’m just not a technician at all who was hoping to upload and activate it in her wordpress blog…)

  293. nico says:

    hey! .. alright, thx – (almost) everything works fine now, you can see your plugin in use on this site: http://grossenbacherag.ch :)

    just one final question: as I load quite ‘big’ images & even flash elements into the accordionslides, sometimes the preloading doesn’t really look neat – in some browsers (IE of course;) or with a slow internet connection all the images load like a ‘sequence’ all over the content underneath the accordion-header.

    any idea of how to do a better looking fix for preloading these images? (I tried with a lower z-index for loading the images underneath the content div below, with no luck though…)

    thx!
    nico

    • banjodrill says:

      I’m having the same issue in IE. All of the content divs load on top of each other for a split second, then they disappear before the accordion panes shoot to the right. Anyone else experiencing this?

      It’s all good in Firefox, Safari and Chrome. As always, it’s IE being a pain in the a$$.

  294. tony says:

    This looks great! I have the opposite problem though: I need vertical content sliders–any plans for creating one?

    Thanks.

  295. Khaled_j says:

    WOOOW!!Two thumbs up for u.Its really helpful for me.God bless u.

  296. Laetitia says:

    hello,

    I tried to make it work but I don’t understand which document I should change or insert JQuery library :
    is it in index.html ? is it elsewhere ?

    Thank you really much for your answers !

    Bye,

    Laetitia

  297. sun_ says:

    I would love to use your plugin with transparent backgrounds for the slide-title-active and inactive images. it works fine as long as they are sliding, as soon as the animation completes the transparency is gone :(

    any fix for this?!

  298. John says:

    Thank you for sharing, first of all!

    Quick question- if the accordian is not set to auto rotate (as in your second example), is there a way to put a “read more” link to the next slide?

  299. Laetitia says:

    Hi again,

    I guess there’s something to do with jquery library – thought I had to install it afterwards… sorry, I’ll try that first and come back if needed.

    Cheers

  300. Laetitia says:

    Hi !

    It seems to be a really nice plugin ! Thank you for sharing :-)

    I’m trying to install it in my wp blog, but when I try to activate it, wordpress tells me the “the extension do not dispose of a valid header” – I tried and changed the index.html file to index.php, but nothing works even that way.

    Could anyone tell me what I should do ?

    Thanks a lot !

    Laetitia

  301. I wanted to point out a small bug. If I have more than 10 slides, slides 10 and above are given numbers with a zero in front, such as 010, 011, 012, etc. Also, these number are positioned slightly higher than the previous slide numbers. Does anyone know how to prevent this? (besides not showing the slide numbers)

    Also, does anyone know how to position the horizontal accordion? For example, if I want to center it, or align it to the right? I tried doing but this does not work for me.

    Thanks
    Nick

  302. Hey Everyone,

    Regarding OPERA, there are three places I’ve determined which needs some additional code for the horizontal accordion to work smoothly. Note that although I’ve improved the look of it, it is not yet solved. Make the following changes and then play around with the variables, and let me know if you figure it out. I think it’s the third one that needs the most tinkering with.

    1) In the head of your code, there is a line which accounts for all the different browsers, except Opera. Notice the part I added for Opera.

    .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg) translate(-70px, -60px); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}

    2) There is a second line within your head that accounts for all the different browsers, except Opera. Notice the line I added for Opera.

    .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Opera */ -o-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}

    3) Within your script file named jquery.easyAccordion.js, there is another section accounting for all the different browers, except Opera. Notice the line I added for Opera, but I think it’s this line which needs the most work.

    // ——– Fix some weird cross-browser issues due to the CSS rotation ————————————-
    if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ }
    if (jQuery.browser.mozilla){ var dtTop = dlHeight – 20; var dtOffset = – 20; /* FF */ }
    if (jQuery.browser.msie){ var dtTop = 0; var dtOffset = 0; /* IE */ }
    if (jQuery.browser.opera){ var dtTop = dlHeight – 200; var dtOffset = 0; /* Opera */ }

    Again, please play around with the variables for Opera. I haven’t gotten it right yet, just improved it. If I solve it I’ll let everyone know.

    Thanks
    Nick

  303. Mastercafe says:

    Great plugin and run perfect on IE/FF/Safari/Chrome, so on Opera I need to put for the first sample:
    -o-transform: translate(-100px, 100px) rotate(-90deg);

    Run rotation so have a background problem with Opera. Anyone know how to solve?
    Over IE9Beta2 run nice… surprise !!

  304. Keevitaja says:

    Hi,

    can i integrate your plugin with cufon font replacement? At the moment the vertical fonts do not look smooth. I try to add cufon, but it will not work properly. Can you help?

    To Nico: yes it does work on IE8.

    Br
    Keevitaja

    • nico says:

      hey! thanks for your comment. I know that it works in IE8 at the moment.. but this is just, cause I am forcing all IE8 users into compatibilty mode (IE7) with the code from above!.. my problem is, I don’t wann do this – I want to support IE8 natively.. think it’s some kinda css-bug… maybe I have to go through all my stylesheet again:( thx anyway & help still appreciated!

      • nico says:

        alright, I found the bug :) as I wanted to include other libraries for lightbox etc, I had jQuery running in no conflict mode (and used $j instead of $ in all jQuery scripts including easy accordion…..) >> problem just was (or still is) that IE8 doesn’t seem to support the noconflict mode.. IE7 does.. that’s just great;)… well, I got rid of the other libraries and use jQuery only – now it works in IE8 again.

        >thx again for this great accordion plugin!!!<

        nico

  305. nico says:

    hey! first of all : thx a bunch for this great great plugin! – i love the customization options and overall feel of it!

    BUT – I got a huge problem (not inflicted by your code, but my adaptions to it I think) – today this site went online: http://www.grossenbacherag.ch

    and way too late, I found out that the accordion-effect doesn’t work anymore in IE8! it works in all other browsers (except opera) including IE7 !! (wtf?!)
    thats why I had to add some really ugly code, forcing IE8 to go into compatibility mode (( )) …and I don’t wanna leave it at that.. at all.

    …anybody an idea which piece of code, maybe css, could’ve broken the function in IE8 only?? I tried EVERYTHING ;)

    thx ~ nico

  306. Daniel says:

    Great work !.
    Congratulations!!!!

  307. Onur says:

    There’s something wrong with Internet Explorer. At first I thought I did something wrong when implementing the code but then when I uploaded the example script folder to the server, it didn’t work either.

    I am unable to test because I don’t have a Windows computer but the people who tested said it doesn’t work and all the slides are shown directly on the page.

    Here is the example script on our server:

    http://www.naturey.com/jQuery-easyAccordion/

    Is there any specific trick to make this work on IE7 ?

  308. Meta 4 says:

    Seems like a very useful plugin, I bookmarked your site. Very impressive design on your site also. I will be back to give more feedback once I find a site to install it on. Thank you for making this plugin available to all for free and not encrypting your code. ;)

  309. Rob says:

    You Rock !!

  310. Jerome says:

    Hey nice work !
    I apologize but when i try to activate the plugin, i’ve got this error :
    “invalid header” well, in french “Cette extension ne dispose pas d’un en-tête valide.”

    Whyy ?

    The zip archive do not contain any .php file…

    How can i do ?

    Thanks a lot !

  311. Jim says:

    Great script. I added it to my new site I’m building with Drupal. It works very well. I just need to find some content to add to it.

  312. Games says:

    Beautiful! Thanks you!

  313. Forgot to say that this is a fantastic plugin and am looking forward to the update. Do the tabs have the ability to active with a mouseover instead of a click? Also, ‘Anonomous’ said something about Opera supporting the transforms. http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ Any merit to this?

    Cheers :)

  314. Hi there,
    I noticed that your horizontal accordion is not doing what it is suppose to in the Opera browser. It looks good in Chrome, but gets completely screwed up in Opera.

  315. UK Postcodes says:

    Thanks for this. I would say this is the best accordian I have come across and I look forward to using it. Nice work :)

  316. Hubert M says:

    Hi Andrea,
    got a small tip for you, improving the plugin performance:

    Inside a each()-loop “this” is a DOM-Element. So your right converting it to a jQuery-Object by calling: jQuery(this)

    Remember: for more performance you could cache the jQuery-Object: var $this = $(this);
    now you would call “$this.myjQueryFunction()” instead of “jQuery(this).myjQueryFunction()”

    Note that you need to do the caching again for every each()-loop; just replacing would not work ;-)

    More info about this, $this and $(this):
    http://www.learningjquery.com/2007/08/what-is-this#ljavascript-16

  317. James Woo says:

    Great script. But it seems like not working with jquery version 1.4.

  318. Its great thanks, i have added to my personal list in

    http://www.ajaxshake.com
  319. Maurice says:

    I like it, where did you get these nice little images used in the accordion from?

  320. Jireck says:

    hi andrea
    First, the design of your website is marvelous
    Second, your jquery’s plugin looking great… i will test
    Third, I Bookmark your site

    Thank for all

  321. Ivan M. says:
  322. Luceos says:

    Great plugin. What might be nice; is to be able to replace the numbers of the slides with icons; self-definable ones.

  323. SapinTremblant says:

    nice one, good work.

    I have a suggestion : what about being able to personalized the time of each slide. It could be useful if my first slide has a small text, my second just simple image and my last and third one has a long text.

    What do you think ?

  324. Brad says:

    Fantastic work! Been looking for something like this for some time now. You’re a life saver!

  325. Anonymous says:

    Hi Andrea,

    Opera DOES support transforms, I guess it just needs that -o- in the beginning for now, like mozilla does want the -moz-.

    http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

  326. Graham says:

    Hey Andrea,

    This plugin looks really awesome.
    Thank you so much for all your work on creating this and sharing it with us.

  327. Mike says:

    Very nice! Do you have a method to actually integrate this into WordPress so each slide in the slider links to a post, etc. (like Slidedeck does)?

  328. Alex says:

    Good work! One question: Is there posibly to make this verticaly moving, not left-right….?

  329. kailash says:

    Wow, this is definitely one of the most gorgeous looking jquery plugin I’ve seen.

  330. Aery says:

    Thanks. Great plugin.

  331. igmuska says:

    $99 for malfunctioning software, that is so wrong on so many levels

  332. moham says:

    hello!!

    how to work this plugin in firefox ?

    not work fine!

  333. @Sarfraz: Thanks mate. It’s a great pleasure to be featured on such an awesome blog! http://www.greepit.com rocks!

    @Keepsea: you can find the license info in the JavaScript file. Anyway, Easy Accordion Plugin has been released under the MIT and GPL licenses. This means that you can definitely modify and use it on your clients’ websites! If you develop new interesting features for Easy Accordion Plugin, please notify me so that I can include the new stuff in the next releases.

    @Dave Gullo: unfortunately Opera doesn’t support transforms or writing-mode properties yet, that means it doesn’t seem to support text rotation at all. Hopefully the will add this to the next release.

    @Saqwild: thanks for your suggestions. I don’t think that the fade effect would work in the accordion. In fact, the accordion without the slide effect wouldn’t be an accordion in my opinion. What I think could be interesting is to stop the accordion on hover (now it only stops on click). I think I will try to add this in the next release.

    @Adam and Greg: Thanks guys, it’s great to see that people acknowledge the effort I put into this plugin and in the website. I’ll keep it up!

    @Zach: I’ve used the progid:DXImageTransform.Microsoft.BasicImage(rotation=3) filter that works fine in IE6/7/8.

    @Andi_sf: that’s definitely possible. You should write a small js function that, when the user clicks on the link, stops the accordion, adds the active class to the respective DT and calls the plugin again.

    • andi_sf says:

      Hi Andrea,

      thank you very much for your reply – could you provide a sample for controlling the accordion via a link on the page – that would be greatly appreciated! Thanks again…

    • B says:

      try:

      -o-transform: rotate(-90deg);

  334. andi_sf says:

    Hello,

    great code – quick question: can I activate the accordion panels from a link on the page (not withing the accordion itself? Say I have an external navigation panel 1 | panel 2|… and when I click on the panel 2 link the 2nd panel slide open? Any help is greatly appreciated!

  335. Zach says:

    Thanks for this! how do you make it work for IE7? won’t do the rotate.

  336. greg says:

    solid work! i’ve been looking for a slidedeck alternate. i second the jquery.easing!

  337. Adam says:

    Brilliant Andrea!

  338. saqwild says:

    thanks, my suggestions. a next – prev/star – stop link, stop on hover, slide fade effect.

  339. Dave Gullo says:

    Andrea,
    Looks good and I am considering using it on a site that I am currently doing the mockups for. However, doesn’t render properly with the Opera browser. I have not looked at the code yet but thought I would check with you to see if you had ideas..
    Thanks

    • Markus says:

      Try the CSS rotation for Opera

      -o-transform: rotate(-90deg);
      -o-transform-origin: 150px 150px; //= Height of container /2, in this case 300px

      It would be nice nice to have an error message for not supported Browsers i.e. Opera < 10.5

  340. keepsea says:

    Seems really cool. I just don’t see any license info. You say it si for free… but how about derivative works? Can I modify it and use it on websites I make for my clients? It would be really nice of you to clarify this legal stuff. If you want people to use it maybe you could slap MIT license on it… or BSD or Apache – whichever you prefer, it’s up to you, just pick one. I know licenses are boring legal stuff but it’s a good thing to choose one – it could reduce legal uncertainty and speed up the adoption of your product.

  341. Great work Andrea, Thumbs up!

    I shared this plugin on my tech blog: http://www.greepit.com.

    Sarfraz

  342. I’m glad you like the plugin guys!

    @saqwild: I might think of adding support for jquery.easing in the near future. I’d like to collect a few suggestions of improvements from all of you guys and I will then decide what to implement in the next release of Easy Accoridon Plugin. Stay tuned!

    • Tanya says:

      Is there any way to link from tab 1 to tab 2 by any chance? Thank you for a great explanation and a download. Thank you.

      (reply on twitter too if you’d like, @tanyadesign.) thanks.

  343. saqwild says:

    Excellent, do you have any plan for jquery.easing support.

    thanks

  344. Satish says:

    Alternative to SlideDeck! Wow… I’ve been waiting for that.
    Thanks a lot.

Leave a comment

Please rate this article and help us plan future posts. Comments are moderated. Do not spam for any reason. Ever!

5 + = 14