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!
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.272 commenti all'articolo
Leave a comment
Please rate this article and help us plan future posts. Comments are moderated. Do not spam for any reason. Ever!
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.
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!!
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! :)
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?
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.
Like this plugin in.Great effort and work. Hopefully i can make good use of it for simple solutions for people in needs. Thanks..
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!
Simply beautiful. This is what i was searching for.
Cheers…..
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?
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
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?
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.
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!
Has anyone found a way to make it into a vertical accordion so things will move up and down vertically and stack vertically?
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
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
Good work! Easy to implement.
I’d like to have an arrow key navigation like Sidedeck. Any idea?
How do I change the spacing between the slide titles? I’d like to add about 10px between each slide.
IE 8 have the error:
jquery.easyAccordion.js
accordianInstance is null or not an object.
What’s wrong?
IT is great in Firefox and Chrome! But not in IE9! All the vertical slides are change to horizontal! please help!
thank u soooooo much
You have done a cool job as your story is recommended by mobile & social media marketing wizard Christian Dillstrom.
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
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!!
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
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!
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
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!
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.
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?
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
yes! something that really works! thank you so much!
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?
Ciao Andrea. Ancora i miei complimenti x il tuo script. Nessuna novità circa Opera e IE9?
Gracias !!!!!! esta muy bueno tu jquery
THNX FOR SHARING
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!
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.
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
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!
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
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.
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?
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 :)
Wow Wow Wow, gud work, love it…………….
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
I have got some weird problem going on in IE9. The complete slide bar is not clickable. Dose anyone have any fix for this?
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
this is a nice script but its very hard to install help pls
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
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!
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.
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.
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..
HI,
is there a Way Out to adapt your super cool jquery accordion to joomla 1.5 framework as a simple plugin?
Thanks!!
Dario
nice! Do you have an option to use regular “next” and “previous” arrows instead of the accordion style?
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 :)
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!
Reminds me of the once popular Mootools accordion menu. Looks good! Might use it :)
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.
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! :)
Thank you! Thank You! I’m glad to see an alternative!
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
Thanks for this great plugin!
One little question: Is there a way to open the page with all panels collapsed?
Thanks,
Maggie
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!
Your site is very nice, congratulations. Can I use Easy Accordion with WordPress ? Thank you.
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!
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
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.
Thank you for the plugin, i solved the problem in opera:
.easy-accordion dt {
-o-transform: rotate(-90deg);
-o-transform-origin: 150px 150px;
}
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
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
NVM got it. I didnt see the post about the filter up top. Thanks! this plugin is amazzzingggggg
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!
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.
hi,
thanks for sharing nice plugin.
how can i disable the tab?
Thanks
Pragnesh
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!
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!
**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
you will need to wrap the text in the dt tag in a div with a width of 100% for this to work properly
Thank you so much, I had this problem with IE, and now it has been fixed thanks to your suggestion.
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
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.
Very nice work Andrea! I was wondering, did you notice that in IE9 only the top of a tab has a link area?
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?
Hi , i’m happy can looking for this plugin .May i know can i plugin Easy Accordion to my wordpress post ?Thanks you.
Hi
I want to ask that how i can remove the slide number from the heading of each slide
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?
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!
Again — many thanks. Any plans for an update to include the code changes above?
WowwwwwExcellent Work!!!!!!!!!!!!
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
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.
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?
How easy is this to orient vertically?
I figured it out!!
The slide.jpg ofcourse……
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……
How about a vertical option?
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.
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
Great plugin. Does it support dynamically adding new slides via jquery or javascript?
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?
Oh, and it is completly busted in Opera 11 too :(
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.
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!
Huhhhhh….. Paypal doesnt support my country. woulod have donated
Thank you for share..
Another request for pausing animation on mouseover the of the accordion – any ideas on how to do this???
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
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?
Hi, Nice work. How Can I remove Number on the tabs.
It seems it doesn’t work that on Opera [tested on v.11]
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.
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!
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.
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?
Nb – move the class of “active” to whatever dt you want to be the default open view.
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.
Hi, Very nice work. Unfortunatelly, I was looking for the same thing but with .
But very great work by the way
How to change default slide screen?
Can I change this?
thank in advance
is it hard to integrate a vertical scroll function in each slide?
Just wondering how one would select a different slide to start with when the page loads?
Thanks so much. It is a great accordion!
This is the single greatest accordion plugin ever made. Thank you for making such an excellent plugin!!!
Thanks for this great plugin
I use it on my site…
Sorry I can’t insert a piece of html-code of my page. I meant text between “dd” tag
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.
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!
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
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
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
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.
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!
Does your API allow using external controls for opening a certain slide number?
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.
Thanks Andrea!
What an awesome job you did. It works great and I prefer this one over other Accordion slider.
Thanks for sharing :)
Hi,
What an excellent piece of work. Great stuff. Thanks for sharing!
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
Thanks you,this Plug is good to study for me
Yes, that fixes opera issue.
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
BTW, where do the animal icons come from?
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.
Hello!
Is there some easy way to add vertical slides within each area?
Thanks and best regards from Slovenia!
Peter
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
With height of the do you mean the height of the entire accordion?
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.
it’s possible to work in opera?
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.
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.
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?
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
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 :)
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.
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 :)
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
hi, is it hard to make this slide vertically instead of horizontally?
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.
Hello Andrea;
Greetings from San Francisco!
Very nice work!
How to make the content of the slide FLUID?
Any pointers appreciated!
Max…
In Chrome only the slide numbers are clickable, the rest of the title bar does nothing. Anybody know a way to fix this?
Place here some code… :)
@Nicholas: I tried your combined js+css solution, but… nothing happened. or better… it got worst! :(
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.
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
Awesome..Thanks for sharing…
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
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,
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.
Good One Buddy. Good Work
Good one… Thanks for the link.
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!
Hello,
Have you found a solution for this?
I’ve been trying to do the same. Please let me know if you have gotten this to work.
Thanks!!
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
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.
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
very thanks. really good sharing.
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.
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=" ">
=======
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*/ }
hi, just wonder, do you write a wordpress plugin for this awesome script? btw i agree with you, sd sucks!
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!
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!
good,it’s a good view and experience
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
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…..
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?
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 ?.
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.
Thank you very very much! Nice work! It works great on GNU Linux Ubuntu using Chromium and Firefox. Saludos desde Argentina
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 :)
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
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.
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?
@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
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 */ }
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.
@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.
This is awesome!!! Thank you for sharing!
I saw sidedeck too, at the beginning of the year, but a hundred dollar was way too much.
Good work!
Bravo, ottimo lavoro.
Zeb
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
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,
@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
@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!
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!
Hi, how can I link back to a certain slide externally?
Thanks
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?
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
@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! :)
*/
Hi, I wanna slide show neither horizontal nor vertical, how can I do this? Thanks
Here is screenshot
http://www.tmace.com/images/20153824333522207000.jpg
Hello,
there are problem in opera , the columnar text show as horizontal , any way to fix it,
regards
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…)
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
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$$.
This looks great! I have the opposite problem though: I need vertical content sliders–any plans for creating one?
Thanks.
WOOOW!!Two thumbs up for u.Its really helpful for me.God bless u.
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
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?!
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?
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
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
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
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
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 !!
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
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!
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
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
Great work !.
Congratulations!!!!
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 ?
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. ;)
You Rock !!
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 !
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.
Beautiful! Thanks you!
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 :)
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.
Thanks for this. I would say this is the best accordian I have come across and I look forward to using it. Nice work :)
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
Great script. But it seems like not working with jquery version 1.4.
Its great thanks, i have added to my personal list in
I like it, where did you get these nice little images used in the accordion from?
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
Beautiful! Thanks you!
Featured at http://www.visual-blast.com/jquery/easy-accordion-jquery-plugin/
Great plugin. What might be nice; is to be able to replace the numbers of the slides with icons; self-definable ones.
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 ?
Fantastic work! Been looking for something like this for some time now. You’re a life saver!
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/
Hey Andrea,
This plugin looks really awesome.
Thank you so much for all your work on creating this and sharing it with us.
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)?
Good work! One question: Is there posibly to make this verticaly moving, not left-right….?
Wow, this is definitely one of the most gorgeous looking jquery plugin I’ve seen.
Thanks. Great plugin.
$99 for malfunctioning software, that is so wrong on so many levels
hello!!
how to work this plugin in firefox ?
not work fine!
@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.
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…
try:
-o-transform: rotate(-90deg);
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!
Thanks for this! how do you make it work for IE7? won’t do the rotate.
solid work! i’ve been looking for a slidedeck alternate. i second the jquery.easing!
Brilliant Andrea!
thanks, my suggestions. a next – prev/star – stop link, stop on hover, slide fade effect.
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
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
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.
Great work Andrea, Thumbs up!
I shared this plugin on my tech blog: http://www.greepit.com.
Sarfraz
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!
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.
Excellent, do you have any plan for jquery.easing support.
thanks
Alternative to SlideDeck! Wow… I’ve been waiting for that.
Thanks a lot.