Accordion v2.0 Released!
Well I went through all of the comments and the forum and added and fixed a lot. Check out the latest version of the accordion and all you who promised a donation… I delivered! Thanks for all your support guys and great feedback, its appreciated.
Sep 18th 2007
Rock on…
Sep 18th 2007
Great - thanks for the update…
BTW: The download section needs updating to According 2 it still mentions 1
cheers, Dave Porter
Sep 18th 2007
& the link on the right does not go to version 2
Dave
Sep 19th 2007
Great stuff, just a thought, why not recommend using the terrific but under-used “” tag for the accordions, that makes the most semantic sense to me, use the “dt” for the header and the “dd” for the content as a bonus you get a wrapper for the whole thing as well!
Sep 19th 2007
hmm… that should say the terrific but under-used “dl” tag
Sep 19th 2007
I tested it on IE and FF - seems to open the whole tab and then reveal slowly.
I tested your copy on your server in my ie and ff - and it did the same.
Sep 19th 2007
Like Dan mentioned above, when you close all of the tabs in vertical view, then open one, the entire tab shows up (pops), then it hides, then grows. It’s pretty jarring. The horizontal accordion works fine though in the same scenario.
Overall, it looks great.
Sep 19th 2007
Just found out about Accordian from the del.icio.us homepage.
Btw, I noticed you wanted to test on a Mac — if you need to test Safari, you can get Safari for Windows now for free (it’s in Beta 3).
Sep 19th 2007
How would you add a button in each section, that when clicked, would open the next section? I have tried to use the activate command, but to no avail.
Thanks.
Sep 19th 2007
Why isn’t it keyboard accessible.
Sep 19th 2007
Lars Huring - Great idea! You can do this with the script, just change the elements and add the class names.
Dan - I think I see what you mean. I will look into this, I think its a content issue, not the accordion itself. I will post an update when I have a chance this week.
Matt - Send a link to an example and I will take a look.
BP - It’s not yet as I am still mulling around the best way to do this, any thoughts would be appreciated.
Sep 20th 2007
hey Kevin, thanks for all your efforts and listening to your fans!
Does this mean I can now ‘nest’ a lightwindow inside a tab of the accordion and while locking out the width, allowing user the ability to view images/quicktimes etc. within the tab section, while the tab section vertically resizes accordingly.
And if so how!
thanks
Sep 20th 2007
(I’m french, sorry for the level in english)
I dont manage to install your accordion 2.0
I just want to create a simple accordion (1 vertical tab)
What code should I exactly write in the Sidebar.php and style.css ?
Thx a lot, your script is great ^^
Sep 21st 2007
Hi Kevin
Lovely script, definitely gonna find a nice use for this.
One thing though - it works fine on both my PC’s, but my laptop shows it as this:
http://img231.imageshack.us/img231/4738/accordiondn3.jpg
It’s pretty up to date, so I can’t figure out what the problem could be.
Any ideas?
Sam
Sep 21st 2007
Hi Kevin,
Great script! Thanks so much for creating this. I searched for a long time for something like this. My question is: how do I get different images to show up for each of the panels up and active states. I want each panel to have different images. I’ve tried setting up different styles to tell the panel to but I think it is controlled more in the javascript. Help!
Thank you!
Sep 22nd 2007
Hi Kevin,
Thank you for providing this script. If you just want to have a horizontal accordion with out the vertical ones what do I need to do.
When I remove the vertical ones it dosen’t seem to work.
PS: Very new to this.
Thanks.
Sep 22nd 2007
Quick question,
First off, great work!
I’m using the accordion for a side nav. However, I’d like to use it as a content holder as well. Can you use two instances of it on the same page? If so, how?
Thanks in advance.
Sep 22nd 2007
Actually, my apologies,
I think the better questions is why does the accordion stop working when you strip out the nested vertical and horizontal accordions?
Sep 24th 2007
nice script works well and striaghtforward. I Was wondering if there was a simple way to change the handle function so that if one has specified No-Toggle or similar, then it would leave any other tabs open instead of closing them (As it does if one opnes another)?
I couldnt manage this, if you could give me a pointer that would be great?
Sep 24th 2007
Ditto on Dan and Alex… the “flash” before the slide makes me sad. Others, good work, thanks for sharing.
Sep 25th 2007
I’m having the same problem as A Claassens: I can’t get the horizontal accordion to work without the vertical ones around it.
Can you please post how to use ONLY the horizontal accordion?
Thanks.
Sep 26th 2007
nice, but i have a suggestion for the next version
extend the options to also have callbacks for before and after activate - for every single headline - that would be perfect!
Sep 28th 2007
Love the script, but having a small issue. Every browser works great… except Safari for Mac. More often than not, when an accordion section opens, the content inside that section is not displayed. The section is the correct height, but no content. This is fairly random, on some refreshes it’s fine, others not. If it loads correctly then I move onto another section and back again, the content will disappear. Anyone else having this problem? If so, is there a solution. I realise this could be tricky to answer without seeing my code. Thanks
Sep 28th 2007
Ignore my last post… all sorted
Sep 28th 2007
mmm. el script es genial y muy bueno…
pero al implementarlo tengo problemas ya que en ff2 se ve muy bien y funciona bien pero en ie7 se separan los submenus yel click se pierde y el tiempo de abrir es mucho nose como resolverlo….
Sep 29th 2007
I love the code, but I don’t seem to be able to avoid the flash on load for vertical accordions. I tried the “Preload” tip from Will Shaver in every permutation, without success. It seems (on Mac, for variety of browsers) that instantiation-on-page-load of a vertical accordion flashes that accordion. The code is straightforward:
Event.observe(window, ‘load’, loadAccordions, false);
var bottomAccordion = new accordion(’vertical_container’);
}
then
Meetings
Even when I skinny down the Accordion v2.0 Demo page I get the effect. Am I doing it wrong, or is there no way around this?
Oct 1st 2007
Hey, thanks for the script. I’m have some troubles with it in IE. I’m using multiple embedded vertical accordions. It shows up in Firefox just fine, but the IE version isn’t working for some reason. Could someone give me a hand?
Sorry in advance for the messy code, I’m relatively new at this. The webpage is www.oberlin.edu/economic/test
Thanks!
Oct 3rd 2007
After days of searching… Yours is the only accordion that works any good (if at all) horizontally. I just have a few questions about horizontal layout…
Is there any way to get it to sit in the center of the screen so that it opens up to the left and right when you click on a tab? This would be a great feature to have, kind of like a story book…
Oct 4th 2007
Hiya Kevin!
Thanks a lot for a great script - the only one that works as intended with a minimal amount of scripting in fact
One tiny gripe/suggestion though (would be boring if there wasnt SOMETHING…):
We are using the vertical implementation on a page for a user profile and would like to use the option “expand all” and “collapse all”.
The latter is straight forward, just looping through all the inactive accordion sections and deactivating them.
The “expand all” function however has eluded me so far… is there any way of doing this with the existing code, or would it require extensive changes? I understand that only one accordion section is flagged as “active” at any given time, so I probably cant set them all to active…
Any thoughts?
Sorry for the long write-up!
Great work again, thank you so much for sharing it!
Oct 4th 2007
Well, I’m italian, so excuse me for my english: it could sounds a little strange. Accordion it’s a big idea: I reckon one of the best idea for web design. Some years ago we were used to cover the clients browser screen with lots of boring pop-up. And do you remember the ani gif? Those ridicoulos two-state images (me sad-me laughing = send us an email) used to get users to a new dimension and only useful to ge users into a invincible maze.
And now, simple, cool, fashionable, sexy, it comes from the future: your accordion. No more popups, no more stupid animated gifs, no more very long pages. Well done!
Thank you very much. I’ll try to use it in a new web site.
Thank you again.
Alf
Oct 7th 2007
I was able to fix the problem where the content will fully show for a split second before it slides into view by changing “height: ‘auto’” in the deactivate function to “height: ‘0px’”.
I still can’t get rid of the flash of all the contents when the page loads though. The tip from Will Shaver didn’t seem to work.
Great script though, thanks!
Oct 9th 2007
@Rich Yeah, that works perfect for getting rid of the flash vertically, except it messes up the horizontal one. So just do a check and let horizontal do it how it the old way:
////
if(this.options.direction == ‘horizontal’){
this.showAccordion.setStyle({
height: ‘auto’,
display: ‘none’
});
}
else{
this.showAccordion.setStyle({
height: ‘0px’,
display: ‘none’
});
}
////
Oct 10th 2007
Hi, good stuff.
There is a slight error in your code (in the distributed package) that dont allow a very useful piece of script to be activated:
Should be :
var verticalAccordions = $$(’_accordion_toggle’);
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: ‘0px’
});
});
Where you put a “.”
var verticalAccordions = $$(’.accordion_toggle’);
To be corrected for horizontal accordion as well:
var horizontalAccordions = $$(’_accordion_toggle’);
horizontalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: ‘0px’
});
});
Oct 11th 2007
Hi there,
i think ure ideas are great!
i was testing the accordion v2 at work. for some reason they use a avant browser. And some black lines appeard below and above the textblocks. for myself i use FF and i dont have that problem there.
thought u would like to know in case u want to fix that as well.
keep up the good work.
Bram
Oct 12th 2007
Ok so my gripe is perhaps one that I’m never gonna solve without writing a new style of accordion that doesnt rely on scripaculous blind/scale effects*.
I have an accordion set up that has a bunch of div.accordion_content divs that are all a set height - with titles that are also set heights, to live in a box of a set height. And I want my accordion to operate without altering the containers height.
And thus far I havent found a way of doing it using blind/scale effects - as doing the blind or scale makes the titles below the currently animating one hop or jump.
Yours does this too - but I think yours is ignoring the height setting for vertical accordions as looking at the DOM it has an inline style of height: auto on the div.accordion_content. Even with that hacked to be my set height, I still get the bottom hopping.
*I think the only solution when needing to be pixel perfect with lots of set heights is to position: relative move the titles and div.accordion_content divs up and down to mask the content. I’m just too busy to get my head into gear to write one right now
Oct 12th 2007
Oh should have said - the reason I think it does the hopping on set size stuff is rounding errors when scriptaculous does its percentage based resizing of elements with scale/blind.
Oct 14th 2007
Hey Kevin,
Check out the latest use of your lightwindow on our site here:
http://www.designrelated.com/news
You have to be logged in to use it, however, since it’s used in the “add a post” functionality.
Keep up the great work!
Oct 15th 2007
Hey I added a bit of functionality to allow the accordion to be open at all times.
This disables the current tab that is open so you can’t close it.
It’s simply a boolean in the options.
// accordion.js v2.1
//
// Copyright (c) 2007 stickmanlabs
// Author: Kevin P Miller | http://www.stickmanlabs.com
//
// Accordion is freely distributable under the terms of an MIT-style license.
//
// I don’t care what you think about the file size…
// Be a pro:
// http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
// http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
//
// alwaysOpen:Boolean — Added the option to always keep the accordion open. - Justin Luk
/*———————————————————————————————–*/
if (typeof Effect == ‘undefined’)
throw(”accordion.js requires including script.aculo.us’ effects.js library!”);
var accordion = Class.create();
accordion.prototype = {
//
// Setup the Variables
//
showAccordion : null,
currentAccordion : null,
duration : null,
effects : [],
animating : false,
//
// Initialize the accordions
//
initialize: function(container, options) {
if (!$(container)) {
throw(container ” doesn’t exist!”);
return false;
}
this.options = Object.extend({
resizeSpeed : 8,
classNames : {
toggle : ‘accordion_toggle’,
toggleActive : ‘accordion_toggle_active’,
content : ‘accordion_content’
},
defaultSize : {
height : null,
width : null
},
direction : ‘vertical’,
onEvent : ‘click’,
alwaysOpen : false
}, options || {});
this.duration = ((11-this.options.resizeSpeed)*0.15);
var accordions = $$(’#’ container ‘ .’ this.options.classNames.toggle);
accordions.each(function(accordion) {
Event.observe(accordion, this.options.onEvent, this.activate.bind(this, accordion), false);
if (this.options.onEvent == ‘click’) {
accordion.onclick = function() {return false;};
}
if (this.options.direction == ‘horizontal’) {
var options = $H({width: ‘0px’});
} else {
var options = $H({height: ‘0px’});
}
options.merge({display: ‘none’});
this.currentAccordion = $(accordion.next(0)).setStyle(options);
}.bind(this));
},
//
// Activate an accordion
//
activate : function(accordion) {
if (this.animating) {
return false;
}
this.effects = [];
this.currentAccordion = $(accordion.next(0));
this.currentAccordion.setStyle({
display: ‘block’
});
this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);
if (this.options.direction == ‘horizontal’) {
this.scaling = $H({
scaleX: true,
scaleY: false
});
} else {
this.scaling = $H({
scaleX: false,
scaleY: true
});
}
if (this.currentAccordion == this.showAccordion) {
if(this.options.alwaysOpen == false) this.deactivate();
} else {
this._handleAccordion();
}
},
//
// Deactivate an active accordion
//
deactivate : function() {
var options = $H({
duration: this.duration,
scaleContent: false,
transition: Effect.Transitions.sinoidal,
queue: {
position: ‘end’,
scope: ‘accordionAnimation’
},
scaleMode: {
originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
},
afterFinish: function() {
this.showAccordion.setStyle({
height: ‘auto’,
display: ‘none’
});
this.showAccordion = null;
this.animating = false;
}.bind(this)
});
options.merge(this.scaling);
this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
new Effect.Scale(this.showAccordion, 0, options);
},
//
// Handle the open/close actions of the accordion
//
_handleAccordion : function() {
var options = $H({
sync: true,
scaleFrom: 0,
scaleContent: false,
transition: Effect.Transitions.sinoidal,
scaleMode: {
originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
}
});
options.merge(this.scaling);
this.effects.push(
new Effect.Scale(this.currentAccordion, 100, options)
);
if (this.showAccordion) {
this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
options = $H({
sync: true,
scaleContent: false,
transition: Effect.Transitions.sinoidal
});
options.merge(this.scaling);
this.effects.push(
new Effect.Scale(this.showAccordion, 0, options)
);
}
new Effect.Parallel(this.effects, {
duration: this.duration,
queue: {
position: ‘end’,
scope: ‘accordionAnimation’
},
beforeStart: function() {
this.animating = true;
}.bind(this),
afterFinish: function() {
if (this.showAccordion) {
this.showAccordion.setStyle({
display: ‘none’
});
}
$(this.currentAccordion).setStyle({
height: ‘auto’
});
this.showAccordion = this.currentAccordion;
this.animating = false;
}.bind(this)
});
}
}
Oct 15th 2007
Hi
I am trying to implement a categorized section of content per grade. So I have vertical tabs for each grade, then in each grade there are various pieces of writing that I want in their own each nested vertical tab. Basically I just took what the demo index.html file has then duplicated the vertical nested section like 5 times. Once I run it though, only the first set of nested tabs are hidden. When I click on any of the other grades and reveal the nested tabs, those are all already opened.
What is going on? Is it to do with the reuse of ID names and the javascript only referencing the first set of ids?
Any help would be appreciated! I’ve been fiddling around for a few days now trying to make it work.
Oct 18th 2007
I’ve got a situation where I need to dynamically add new accordion toggles and content to an existing one. I added the following function to do so, and it seems to work well. There may be a way to do it that doesn’t require putting the new toggle in an array first, but I’m just getting started with Prototype and this was the fastest way for me to make things work. I only wish I’d checked your site a week ago…. I spent about 3 days adding the ability to nest vertical accordions and resize them when content changes :). But your method for doing so are much cleaner than mine :).
Anyway, here’s my addToAccordion function… i put it between the initialize and activate functions. You can pass either the new toggle element itself or the id of the new toggle element.
addToAccordion : function(newToggle) {
var accordions = [];
accordions[0] = $(newToggle);
accordions.each(function(accordion) {
Event.observe(accordion, this.options.onEvent, this.activate.bind(this, accordion), false);
if (this.options.onEvent == ‘click’) {
accordion.onclick = function() {return false;};
}
if (this.options.direction == ‘horizontal’) {
var options = $H({width: ‘0px’});
} else {
var options = $H({height: ‘0px’});
}
options.merge({display: ‘none’});
this.currentAccordion = $(accordion.next(0)).setStyle(options);
}.bind(this));
},
Oct 18th 2007
Hi All
Maybe simple question but how can I get a different fixed background on toggle active/non-active for every horizontal toggle bar ???
By duplicating css code en renaming and attaching every tab with its own css class doesnt do the trick I guess the class code in JS…. But then again I want to keep in intact withoud changing the code [due updating etc etc]
anyone any tips on that ??
Ciao Valentijn
Oct 18th 2007
Hello …
How can I dynamically alter the accordion frame sizes ?
http://candida.bri.nrc.ca/acctest.cfm
Javascript Examples:
winW = window.innerWidth-50;
function loadAccordions() {
**** some code deleted ***
content : ‘horizontal_accordion_content’ }, defaultSize : { width : 800 }, direction : ‘horizontal’ });
I want to change the 800 value with the value of winW.
And at the bottom of my page, I am trying to adjust the sizes of my horz. accordion
side-selection bars to 100px (for testing), but that doesn’t work. Eventually I want to use the dynamically set horAccSize value.
var horAccSize=window.innerHeight-220;
var hAccordions = $$(’.horizontal_accordion_toggle’);
hAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: ‘100px’
});
});
Thanks in advance for your replies.
- Marco.
Oct 18th 2007
Hi Marco
Do you know how to adjust the css or js so I can create customizable tab backgrounds??
Ciao Valentijn
Oct 18th 2007
Hello Valentijn …
I assume it should look something like this, but I have not tested it …
Your accordion tab
etc …
Javascript:
document.getElementById(’AccTab1′).style[’background’].url=’http://your.image.jpg’;
Groetjes.
- Marco.
Oct 18th 2007
Hello Valentijn …
I assume it should look something like this, but I have not tested it …
[h1 id=”AccTab1″ name=”AccTab1″ class=”accordion_toggle”]Your accordion tab [/h1]
etc …
Javascript:
document.getElementById(’AccTab1′).style[’background’].url=’http://your.image.jpg’;
Groetjes.
- Marco.
Oct 18th 2007
I am trying to figure out now how I can make gradient bars with the javascript from this website http://slayeroffice.com/code/gradient/
- Marco.
Oct 18th 2007
Hey Marco [Dutch indeed but try to keep it english
]
Ok now how to do that but how can I override the tab with onmouseclick cause the event is already in use by accordion js or prototype etc etc….
You can reach me at ontwerp AT zonnet.nl
Must be a better way
Ciao
Oct 18th 2007
Marco : what is your problem with the gradients??
Give me a link or so maybe we can help eachother out…
Oct 19th 2007
Hi all
I gave this script up for no cause I cannot figure out to adjust design customization ad hoc. So I used Spry [adobe labs] and that’s capable of overiding onclick events etc :
css:
//eg : setStyle(’acc1′,’color’,'blue’);
function setStyle(objId, style, value) {
document.getElementById(objId).style[style] = value;
}
for eg.
then on a tab,link or whatever : onclick(”setStyle(’idofdivorduch’,'color’,'red’)”;)
This works great in spry !
anyone any tips on doing such within Accordion 2.0 ??
Oct 21st 2007
Three quick things about the latest download:
1) Thanks, it’s great!
2) The page title still says v1.0
3) The css isn’t included in the zip. I copied yours and added the folder/file manually.
Anyway, just thought I’d point that out in case it helps anyone else.
Oct 22nd 2007
Looks great. What is “MIT-style” license? Do you have the exact text?
Oct 23rd 2007
It seems there’s some strange behaviour using Scriptaculous v. 1.8.0_pre1 (with Prototype v. 1.6.0_rc1).
Can you figure out of it?
Oct 23rd 2007
Hi,
I’d like to for the active accordion to NOT be collapsible as implemented in version 1.0. Is there an easy way for me to turn this feature off?
Thank you for providing this script.
Vic
Oct 23rd 2007
This is wonderful. I tried to MooTools Accordian and could not figure it out. With your tutorial and easy script I was able to successfully put the accordian on the website im working on. My only problem is that it does not push the other entries down when opening a new one. Is there a forum or help section you can direct me to?
Oct 24th 2007
My accordion works perfectly in IE7 but not firefox????? what sort of things can i look for?
chad.camacho@gmail.com
Oct 24th 2007
Awhile back, a poster named Matt had inquired about addding a button to a section in the Accordion menu and being able to open another section within the same accordion. I couldn’t fid a response to his inquiry.. is this possible? I am stuck on this issue. Thanks and great work.
–me
Oct 24th 2007
I have been trying to learn some more Javascript through Prototype and Scriptaculous, this script looked ace. Although I have not been able to get it to generate even the simplest of pages. Javascript is reporting that my div doesn’t exist! This comes from line 1073 in prototype.js
if (typeof element == ’string’) element = document.getElementById(element);
return Element.extend(element);
at the point of the if, element is still ‘my_container’ after the call to getElementById it’s a null
so Element.extend is passed a null
and promptly gibs
So even between us we have no idea! Test page -> http://www.squaresphere.co.uk/statspage/test.html
Oct 25th 2007
I have managed to find the solution to this problem. You will need to add an event observer, for page load, as per the example source. Which then loads all the div’s to accordion.
Oct 25th 2007
I dodwnloaded the lightwindow example. It worked just fine - EXCEPT for the wmv subject - It simply woulden’t work - So I checked the lightwindow.js and found that the wmv were missing. So after adding it - IT WORKED. Your work is just ammazing! THANKS
Oct 26th 2007
Please pardon the possibly simple question.
For a vertical accordion, you place titles on each tab by doing a Title 1
If you try the same thing for a horizontal accordion, well, the text gets cut.
How could one do this? First tried by making jpegs for each of the titles, but then don’t know how to set the background property to be different for each tab.
You can force the title to line up in a column centered on each tab, but the readability isn’t great.
I think what I really want is to specify the background jpeg for each tab. Is it possible?
Thanks for any help.
Oct 27th 2007
I was working arround with the different-background issue.
Finally got the solution, altering the source. So I’ll explain how it works.
First of all, the images’ names must end with a(n) for the actives, and i(n) for the inactives, with (n) the number of the tab.
Example: image_a1.jpg, image_i1.jpg, image_a2.jpg, image_i2.jpg.
The name before the a/i(n).jpg must be the same for all files. Also it only supports JPG.
So, in the declaration of the accordion, we have to declare the ‘background’ property, giving ir the path value of the images after the a/i(n).jpg
Example:
function loadAccordions() {
var topAccordion = new accordion(’horizontal_container’, {
classNames : {
toggle : ‘horizontal_accordion_toggle’,
toggleActive : ‘horizontal_accordion_toggle_active’,
content : ‘horizontal_accordion_content’
},
defaultSize : {
width : 336
},
direction : ‘horizontal’,
background : ‘/images/accordion_’
});
topAccordion.activate($$(’#horizontal_container .horizontal_accordion_toggle’)[0]);
}
If the background is not specified, the path will be ‘/images/accordion_’
The last step is overriding the initial background for each tab for the corresponding inactive image.
Example:
That’s all!!
You can download the modified accordion.js from: http://www.joaco.net/downloads/accordion.js
Hope to save you a headache.
Oct 27th 2007
Where it says: “giving ir the path value of the images after the a/i(n).jpg” should say: “giving ir the path value of the images BEFORE the a/i(n).jpg”
Also, the initial background overriding example didn’t appear. Should say:
without the linebreaks
Oct 27th 2007
damn!
Oct 28th 2007
to answer my own question…
take a look, if you like.
thanks for the js!
Oct 30th 2007
Just upgraded to prototype 1.6.0_rc1, and the Hash changes break the accordion. Removing all instances of $H and var.merge() in accordion.js solved the problem. For example:
Replace:
var options = $H({width: ‘0px’});
options.merge({display: ‘none’});
With:
var options = {width: ‘0px’};
Object.extend(options, {display: ‘none’});
Hope that’s helpful.
Nov 7th 2007
A question: How can I use two or more accordeons in the same page?
Thanks
Nov 9th 2007
does not work after upgrading to Protype 1.6.0 final…
Nov 9th 2007
Thanks for the Accordian js, but in order to get it to work properly I cut and pasted your code from the release 2 page, and am stripping out your content. Now when I try to remove the horizontal menu, it loses the functionality of opening and closing, and is a static open state all the time for all the panels. Can’t I simply delete the horizontal content in that panel? Do I need to remove any javascript?
I thought all I needed to do was replace that section with a the content of another panel. Doesn’t work.
Thanks, I want to donate, but if I can’t get this to work, I can’t.
Nov 11th 2007
I found this accordion is the best as far as I know. I have checked around 10 Ajax accordions, including jquery, mootools, etc.
I played around a bit with accordion v2.0. But one thing I can’t do it. I added one more “A Vertical Nested Accordion”, but the first nested accordion works well but the second one is just open and it does not function as accordion.
Can anyone tell me how to add more than one nested accordions?
Nov 14th 2007
I am using the brilliant accordion as a side vertical nav.
Any idea on how to use javascript to auto-select one of the aocordian menus
when going to another page, i.e. how can you get it to keep state going one
page to another..
Nov 15th 2007
Hi there,
We needed to have the areas within each accordion tab to have a fixed height and be scrollable. It was a simple change. Here’s the diff:
$ diff accordion.orig/accordion/javascript/accordion.js accordion.vnet/javascript/accordion.js
52c52,53
onEvent : ‘click’,
> showscrollbars : false
193c194,195
height: this.options.defaultSize.height ? this.options.defaultSize.height : ‘auto’,
> overflow: this.options.showscrollbars ? ‘auto’ : ‘hidden’
This allows you to fix the height (by default curtailing the content) in defaultSize.height. You can set showscrollbars to true if you want the content to be scrollable.
Cheers,
Erich Enke
Colorado vNet
www.coloradovnet.com
Nov 16th 2007
Hi i really like your script but it’s not working in Prototype 1.6
Nov 16th 2007
your script is really cool indeed - how can i make it work with prototype 1.6 ?
I tried Ryan Holliday’s solution…but i guess i dont get it.
thanks!
Nov 17th 2007
another big fan of this script.
Thanks Ryan for the fix. For those having trouble following his example. You need to get rid of $H(…) just search thru the file and get rid of the $H( and make sure to get rid of the closing parens. Then look for where it it says options.merge(…) and replace it with Object.extend(options, …)
Hope that helps. I did this after upgrading to scriptaculous 1.8 with prototype 1.6 and it repaired accordian.
Nov 22nd 2007
Thanks Ryan!
Your solution also worked for me.
perhaps kevin can release a new version.
ciao,
der flo
Nov 22nd 2007
Hi,
Got the script working nicely but I’d like to be able to have it open a different level by passing the value across from an href in a separate page. Is there any way of doing this? Kind of similar I guess to Grant’s question above (Nov 14th) possibly…?
Many thanks
Nov 22nd 2007
Hi,
I’ve been looking for this kind of script for a while.. Thanks!!
One issue: if get the following browsing your site on FireFox 2 on Mac OS 10.5.1
Warning: Error in parsing value for property ’size’. Declaration dropped.
Source File: http://www.stickmanlabs.com/accordion/
Line: 0
Nov 22nd 2007
Just to check, Maxtone, was your comment in reply to me or completely unrelated? Seeing as the is missing from under my comment I wasn’t sure if that was a reply or not.
Nov 23rd 2007
Hi Corinne,
No, my comment was a general one.
Nov 25th 2007
Hey Kevin, phenomenal job here. I was just wondering if there is a way to make the accordion work by having the title below the content, as opposed to above the content.
I was surprised I couldn’t find any contact information to e-mail you directly.
Nov 29th 2007
i love your accordion.
but can you please fix the little flicker when you go from the first menu at once to the last, and otherwise. in ie7 under vista we have these thiny little problem.
please fix it.
great jens
Nov 30th 2007
Hey.
I guess my question is similar to Corinnes - how can I keep a toggle-window open when I load a new page (like for a photo gallery) in it? It’s however very essential to enable the user to still close this very toggle manually…
Any help will be greatly appreciated
Thanks,
Jan
Nov 30th 2007
Hello
I have just tried to download Accordion, but the zip just seems to contain empty folders and files.
Could you have a look?
Thanks
Dec 3rd 2007
Hi! Great work. Question: How do you populate the content of each accordian’s content with an AJAX call - I mean I click on the header, i make an ajax call to get the content and then the accordian opens and the content retrieved by ajax fills in. BTW send me an email if you need a contribution towards buying a mac.
Dec 3rd 2007
I managed to extract the zip in the end.
But I think this code is broken in prototype 1.6 (to which I am new). The Class.create syntax has changed I believe. Managed to get past that, but things only half work.
The afterFinish in deactivate appears never to run. It is undefined in the effects.js loop function. This leaves showAccordion out of date.
A shame, because this looks like a nice piece of code. I hope the author can take a look!
Dec 3rd 2007
Hi all, really thanx for this script, I Was developping one from an other side.
I had problems with mouseover event, so i tried your one, its cool but it has still some bugs using mouseover…
Dec 4th 2007
Hi there,
Look at my test-website…
accordion@extralarge.nl
Try to put SWF into accordionmenu…
Work perfect on FF en Safari on a MAC, Een looks good on iE6, but not on FF-windows.
SUggestions?
Dec 4th 2007
Is it at all possible to mimic the effect Apple.com is using on its accordion: http://www.apple.com/iphone/
notice when the page loads all of the accordion tabs are expanded and then contract to the default open tab. Is this somehow possible with your amazing work?
ty
Dec 5th 2007
Hi everyone, I would like to say one thing before I get to my 2 little problems.
GREAT JOB!!! with the ACCORDION, I have been able to modify it so I can use it as a side vertical nested menu system (3Levels) except for these couple of issues:
1) For the life of me, I have not been able to figured out a way to get rid of that annoying flash, it seems that it only happens when you re-click to Open header that was already opened and then closed before.
2) Why is it when I move the css styles out of the actual page and put it in an external one the Highlight of the header will not get applied as it will when I leave it @ the top the page??
Alen
Dec 5th 2007
This is great, I had to apply Josh’s changes to make it work with scriptaculous but that wasn’t too difficult.
If you apply the changes to your source I’ll make a donation to your Mac Pro pot.
Dec 5th 2007
Thanks to Josh and Ryan for making it work with Scriptaculous 1.8. To make it simpler for other people, here’s a patch you can apply using the UNIX “patch” command.
[BEGIN PATCH don’t include this line]
— accordion.js.orig 2007-09-18 18:44:30.000000000 -0400
accordion.js 2007-12-06 01:10:23.000000000 -0500
@@ -62,11 62,11 @@
}
if (this.options.direction == ‘horizontal’) {
- var options = $H({width: ‘0px’});
var options = {width: ‘0px’};
} else {
- var options = $H({height: ‘0px’});
var options = {height: ‘0px’};
}
- options.merge({display: ‘none’});
Object.extend(options, {display: ‘none’});
this.currentAccordion = $(accordion.next(0)).setStyle(options);
}.bind(this));
@@ -90,15 90,15 @@
this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);
if (this.options.direction == ‘horizontal’) {
- this.scaling = $H({
this.scaling = {
scaleX: true,
scaleY: false
- });
};
} else {
- this.scaling = $H({
this.scaling = {
scaleX: false,
scaleY: true
- });
};
}
if (this.currentAccordion == this.showAccordion) {
@@ -111,7 111,7 @@
// Deactivate an active accordion
//
deactivate : function() {
- var options = $H({
var options = {
duration: this.duration,
scaleContent: false,
transition: Effect.Transitions.sinoidal,
@@ -131,8 131,8 @@
this.showAccordion = null;
this.animating = false;
}.bind(this)
- });
- options.merge(this.scaling);
};
Object.extend(options, this.scaling);
this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
@@ -143,7 143,7 @@
// Handle the open/close actions of the accordion
//
_handleAccordion : function() {
- var options = $H({
var options = {
sync: true,
scaleFrom: 0,
scaleContent: false,
@@ -152,8 152,8 @@
originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
}
- });
- options.merge(this.scaling);
};
Object.extend(options, this.scaling);
this.effects.push(
new Effect.Scale(this.currentAccordion, 100, options)
@@ -162,12 162,12 @@
if (this.showAccordion) {
this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
- options = $H({
options = {
sync: true,
scaleContent: false,
transition: Effect.Transitions.sinoidal
- });
- options.merge(this.scaling);
};
Object.extend(options, this.scaling);
this.effects.push(
new Effect.Scale(this.showAccordion, 0, options)
[END PATCH don’t include this line]
Dec 6th 2007
There seems to be a bug with your Accordion 2.0 and the latest scriptaculous revision. The content scales instead of blinds up. Also seems to be causing recursion errors. Any tips/pointers?
Dec 7th 2007
In order to fix the “flickering” on second reopening, change the following rows:
this.showAccordion.setStyle({
height: ‘auto’,
display: ‘none’
});
to
this.showAccordion.setStyle({
height: ‘0px’,
display: ‘none’
});
Dec 7th 2007
$50 Kevin! I will gladly donate $50 to your macbook pro fund if you can implement a fix to have the accordion stay open between pages in the same section.
In other words, instead of using the bottomAccordion.activate($$(’#vertical_container .accordion_toggle’)[4]); to open a section could that simply call a function that opens it on page load without the animation? That way it appears to stay in the same state between pages
see: Grant’s post Nov 14th 2007 as I think he is asking a similar question.
thanks
Dec 11th 2007
Hi,
Great accordion, question I cannot get rid of the flashing in IE could you
please explain me where to put this code if this one is the good to fix that problem.
// Special thanks go out to Will Shaver @ http://primedigit.com/
var verticalAccordions = $$(’.accordion_toggle’);
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: ‘0px’
});
});
Thanks a lot Alejandro.
Dec 11th 2007
I was wondering if you can open another pane from within the content of a pane. Say, I have a link within a gridview in one pane. So when I click on that link, I would like it to open up another pane and collapse that pane.
Dec 11th 2007
Hey Kevin,
I also have a similar issue as Chuck and Ian where accordian does not play well with prototype 1.6.0 and effects.js 1.8.0. It appears that Class.create syntax has been changed. Seems to work great with prototype 1.5.1.1 and effects.js 1.7.0, but switching to that causes recursion issues with Effects.DropOut();
what’s the best approach for a fix?
-jim
Dec 11th 2007
turns out that the $H fix mentioned above fixed my issues.
thanks!
-jim
Dec 12th 2007
To Jim..
Did you manage to get the Accordian to work with the latest revision of Scriptaculous. If so, could you please share your fix?
Thanks in advance.
-Maxtone
Dec 16th 2007
Since prototype 1.6.0 was released there are problems with Accordion because it flickers. It only works well with Rel. 1.5.1 but on the other hand for a propper work with autocomplete you need Rel. 1.6.0. So at the moment I can’t use Accordion and autocomplete on one site.
Is there a solution available?
Thanks in advance. It’s a great work you’ve done.
M. Kruppeit
Dec 18th 2007
Accordion doesn’t work with prototype 1.6.0 (as mentioned above). Can we expect an update soon?
Dec 20th 2007
accordion is working fine in IE6 and 7 but giving errors in firefox
Dec 24th 2007
Help!
I have installed a test page but no matter what I try the according constructor can’t seem to find the main container id.
Here is the link:
http://wannenmacherwebs.com/sbb/test5.php
Any ideas?
Dec 26th 2007
Where in this script or in the markup would an ajax call for content be placed? I would like to load the content when the toggle bar is clicked and then expose the content of the div. I didn’t really see any examples of this anywhere and I am having some trouble figuring out how to make it happen.
PaulM
Dec 26th 2007
i have a problem with ul/li toggle. in this html element no toggle working???
Dec 28th 2007
I gathered all of the proper libraries together to make Lightwindow and Accordion work on the same site. Would anyone like a list of these libraries?
Dec 28th 2007
Keith,
When I click on your link I get a 404 error. Can you update the link?
Dec 28th 2007
Frashier,
In order for the ul/li toggle to work they really need to be encapsulated in containers for expanding and contracting. However, a posting of your code would be helpful for debugging?
Dec 28th 2007
Ben,
Hello,
my simply code:
dog
cat
1
2
3
4
dog
cat
1
2
3
4
Dec 28th 2007
Frashier,
Are you hoping to expand the “1 2 3 4″ or are you using ul/li as headlines?
Dec 30th 2007
Ben,
yes i using ul/li as headlines (my accordion_toggle) and expand the “1 2 3 4″ (my accordion_content)
Dec 31st 2007
Just wondered if you actually know what ‘Colophon’ means?
Looks like you’ve misunderstood the use from those O’reilley books!
Jan 2nd 2008
Has anyone successfully created an accordion menu with multiple vertical nested containers? The demo only uses one, and if I try to use more than one, only the first one collapses properly. All others display with contents expanded. I’ve seen a couple other people list the same problem, but I haven’t come across a solution.
Jan 2nd 2008
Frashier,
You should be able to expand a “ul” list that is nested within an “li” tag if you have them properly classed.
I.E.
Dog
Cat
1
2
3
4
I hope this helps!
Jan 2nd 2008
Oh crap! It stripped my tags! Has anyone else had any luck publishing HTML snippets in this forum??
Jan 2nd 2008
Ben, see this thread in the forum: http://forum.stickmanlabs.com/viewtopic.php?id=715
Jan 5th 2008
Great Job! I like the degree of control this accordion implementation gives as compared to the moo.fx effort.
One thing I don’t like, and perhaps its how I’m trying to pull it off — my ‘accordion_content’ elements (div’s, to be specific) contain a number of child div’s. When I click an accordion_toggle element, the content is shown in the two adjacent accordion_content elements, the elements blind up or down appropriately, and the element that’s been commanded to hide finally hides its content. The effect is quite distracting — I have overlapping content for a bit that just doesn’t look right. Is there a way to keep the child divs from showing in the element that’s unhiding its content until the blind effects have completed?
Thanks again.
Jan 8th 2008
Hi,
I am trying to set-up accordian 2.0 to see if its the right thing to use on my site. On first impressions it certainly is the type of effect I am looking for. However I am running into a few problems getting it up and running and I was wondering is there a fourm or anywhere to get support.
TIA,
Adrian.
Jan 8th 2008
Hi there. This is a lovely script but I’m unable to work out how to have multiple accordians on a page. The script sees 2 accordians as being only one.
This issue has been mentioned previously, but there doesn’t seem to be a solution posted above as yet.
Kevin, if you’re able to assist with this, I’ll donate $20 to your macbookpro thing.
Jan 9th 2008
I guess your paypal account will make a nice jump up when the accordion will be updated to work with the latest scriptaculous & prototype…. I’ll be glad to participate to your new mac !
cheers
Jan 10th 2008
yeah i second that emotion. would love it if this worked with the new scriptaculous libs. i tried the hacks posted herein, but i didn’t return the expected results… thanks for your hard work you make websites look better everywhere.
Jan 10th 2008
Mate, this is fantastic. Best accordion script ever!
It’s fast. It’s pretty, it’s free. You absolutely rock!
Jan 11th 2008
Sorry for the double post, but I’d like to thank Ran for his advice on how to stop that annoying flashing from occurring.
Kevin, reckon you could modify the script to reflect his comment? It makes things perfect now.
Also, you got the laptop yet? Because I’m looking at sending you some cash mate!
Jan 13th 2008
Still no update
Jan 13th 2008
Hi,
I LOVE this script, I however have a problem with one thing on it and have spent nights trying to solve it but to no avail.. Help Please… I noticed that the script only supports a maximum of 10 tabs. I have over 16 tabs and onces I create the 11th Tab, the whole script stops working
Any help on how to overcome this? its doing my head in thank you SOOO MUCH
Jan 16th 2008
I’m having similar problems as others regarding recursion issues. Whever I try to use any additional effects on the page at all with the included libraries I’m getting recursion errors in Firefox. I tried to use the newest version of prototype and scriptaculous and it fixes the errors and plays the effects but now the accordion looks weird and jumpy when it is opened/closed. Anybody have a fix?
Jan 16th 2008
Hello, thank you for this awsome script.
I have a small question concerning an external button.
i want to add a button that on click he will open let’s say product accordion number 2?
is there a way to do that ?
Thank you.
Jan 17th 2008
fixed version available in forum post here:
http://forum.stickmanlabs.com/viewtopic.php?id=639
Jan 18th 2008
Hey guys I’d like some help if that is possible.
When content loads every tab is open and the content shows as it loads, until it finishes,
then everything closes and the first tab opens
Is there a way to hide that load, or load with all tabs closed by default? If your answer includes the snippet in the accordion’s instructions, please let me know where does it need to be added, as in which file and between what content?
Any help is highly appreciated : )
P.S. colophone means butt-phone lol! (I’m Greek)
Jan 22nd 2008
Peter,
if you want to open panel 2, you can use this as an onclick event on the button.
For example, if you want to open panel 2:
onclick=”topAccordion.activate($$(’#mainAccordionContainer .accordion_toggle’)[1]);”
Hope this helps.
B
Jan 23rd 2008
Thanks Seengee, effects are now working!!
Jan 25th 2008
Kevin-
Thank you for the accrodion script. I have downloaded it and have been fooling around with it but I have been having a hard time getting two nested accorions to work. Would you be willing (for a fee) to put together the script for me? Here is what I need.
Heading1 (accodion)
subheading1 (nested accordion)
web link
web link
etc.
I would need the above for Heading2 and Heading3 (same config). I would like to have a gradient in the header, but I think I can handle putting a jpg together to handle that. The web links, can they be something more interesting that an a href link?
Please contact me via email. Thanks.
Jan 28th 2008
Hi,
I’m trying to get this working with the latest prototype and scriptaculous (1.6 and 1.8.1 respectively), but the whole system seems to be broken with this new version. The scale scales on both azes and never reappears. I used the same html/css as on your site, but the javascript is the latest prototype/scriptaculous from their respective sites plus your accordion code.
Tom
Jan 28th 2008
I resolved the problem above with the fixes mentioned in the posts above too. I’ve also added an additional feature you might like to include. This is the ability to have the accordion not close entirely.
First, I added an option variable called “closable” which I’ve defaulted to false under this.options = Object.extent(…) - It now looks like this:
this.options = Object.extend({
resizeSpeed : 8,
classNames : {
toggle : ‘accordion_toggle’,
toggleActive : ‘accordion_toggle_active’,
content : ‘accordion_content’
},
defaultSize : {
height : null,
width : null
},
direction : ‘vertical’,
onEvent : ‘click’,
closable : false
}, options || {});
I then added a check for this option in the activate function:
if (this.currentAccordion == this.showAccordion) {
if (this.options.closable) {
this.deactivate();
} else {
return;
}
} else {
this._handleAccordion();
}
Jan 28th 2008
A Horizontal Accordion! (Nested)
pardon my ingles I have a XXX working but when I copy I cosay to have 4 equal panels single works to me first if somebody knows like making this thanks for the aid
this code work:
Aprovisionamiento
1
2
this code not work:
Aprovisionamiento
1
2
Reportes
1
2
Jan 28th 2008
It works! I tested it on my own website on which I’ve it implemented.
Yes you will get a donation.
It looked and moved very crappy when I first used it, then I found out that overflow:hidden;
in the .accordion_content solves it.
You’d better update it and mention it! I bet you knew.
Anyway thanks for your great tutorial and recource.
Jan 29th 2008
Hi Kevin,
what a great script. we’re trying to implement multiple vertical nested accordions, but it doesn’t display properly in IE - the first nested accordion is fine, but all vertical nested accordions after that are showing as open, and the open/close control don’t work. is there a way to make multiple vertical nested accordions work in IE? We’d love to use this tool in future, and would be glad to compensate you for your help!
Thanks in advance!
Jan 30th 2008
Okay, I’m having some issues setting up the accordion. It might be my tiredness, but I think I followed the instructions correctly, and I get this: http://www.studentsagainstterrorism.org/indexacc.htm
How do I fix this? Thanks!
Jan 30th 2008
There is an issue with the resizing of panes using prototype 1.6. Do you know a workaround or what code needs to be updated? Thanks.
Jan 31st 2008
question:
i want to activate or toogle a “accordion_toogle” with an external link. like this:
Link 1
but that will not work… any ideas? Thx for your support…
Jan 31st 2008
oh… i will post the code again.. :
Link 1
Jan 31st 2008
damnd…
bottomAccordion.activate($$(’#vertical_container .accordion_toggle’)[1]);
this line in a “a href onclick…” will not work..
Feb 2nd 2008
I love this Accordian. I’ll definitely be making a donation once I get it all working for me when I update my site.
Does anyone know how to get reflection.js or the mootools version of reflection.js to work on an image inside the Accordian? I tried and cannot figure out why it won’t work. This would really put the icing on the cake for my images if anyone knows - been working on this for three days with no success.
Feb 3rd 2008
The Accordion download seems to be missing some files which are necessary for it to work.
Specifically, these files are missing:
/accordion/css/default.css
/accordion/images/macbook.png
/accordion/index.html
/accordion/javascript/code_highlighter.js
/accordion/javascript/html.js
/accordion/javascript/javascript.js
Feb 6th 2008
New Version of Accordion.js located here..http://www.aughenbaugh.us/accordion2/Index.html
Can do some Ajax within it now.
Added an even for when a tab is Activated.
Comments in Source…
~~~~~~~~~~~~~~~~~~~~~~~~
2-2-2008 Trey Aughenbaugh
made a few updates based on the comments from here.
http://stickmanlabs.com/2007/07/12/accordion-v10-released/#comments
-Updated it to work with new version of Prototype 1.6 and scriptaculous 1.8
-Updated to remove flicker
Added ability to have a callback function.
Useful for making AJAX calls.
Also Added the ability to specifiy which call will get executed each time.
Use the ID sttribute of the DIV for reference. REQUIRED for callback.
Thanks,
Trey Aughenbaugh
Feb 13th 2008
hello,
need a hover effect fot the toogle. mouseover/out or a:hover with bug, the toggleactive no working!!!
Tips??????
Feb 14th 2008
Hi there,
I can’t get the mouseover to work - the panels will only open on ‘click’. Here’s the code I’m using:
var nestedVerticalAccordion = new accordion(’vertical_nested_container’, {
classNames : {
toggle : ‘vertical_accordion_toggle’,
toggleActive : ‘vertical_accordion_toggle_active’,
content : ‘vertical_accordion_content’
},
onEvent : ‘mouseover’
});
Feb 22nd 2008
Evening
As you say, this is the best Accordian out there.
I am using Sharepoint and this is the only Accordian that works within the CEWP (Content Editor Web Part).
Everything works except the vertical nested piece - any ideas why ?
Also, I added jquery and a drag piece - it worked, but the accordian opens up and does not work. Others that I have tried allow the moveable piece, but the acordian collapes - the opposite of yours.
Any ideas would be appreciated.
Iain
Feb 25th 2008
Hi Kevin,
Love the library here, but it doesn’t work with the latest Prototype (1.6). Any plans to update it? I’ve got some other widgets that I would like to use in my latest site that rely on 1.6.
Thanks for putting this out there!
Chris
Feb 25th 2008
I love this script!
Ive had an idea and dont know how to do it, can anyone help please?
I want to fix the vertical accordian (with just one accordian in it) to the bottom of may screen and when activated have the toggle push up revealing the content.
I’m pretty good with css but javascript is new to me.
any help would be appreciated!
Cheers
Feb 26th 2008
This is a great script! But I have a few questions on possibilities.
I’ve got a test page here:
http://www.three6ixty.com/stark/
I’ve set it up so that I’m only using the horizontal accordion and everything seems to be working great. I just have a few features that I would like to add/change and I’m not sure how to do it or if it’s possible.
I would like to be able to apply a different style to each individual horizontal toggle. So each one would be a different color for example.
Also, would it be possible for the links in the nav on the right to open or close a respective horizontal toggle?
Any thoughts? Thanks!
Feb 26th 2008
OK, I figured out how to apply different styles to each individual horizontal toggle. Simply insert a div class into the toggle.
So the only thing I can’t figure out is how to open and close each slider using the menu on the right.
Any thoughts/suggestions are much appreciated!
Thanks.
Feb 27th 2008
Hi. I dont know have you seen this problem but content element is blinking.
To solve this problem I add this strings:
if (this.currentAccordion != this.showAccordion)
this.currentAccordion.setStyle({
height: ‘0px’
});
Mar 2nd 2008
First, thank you for the accordion, great job! Looks very nice and is very useful (would be=D)…I really can’t figure it out but I don’t get it to work on my own site…I even copied my content (means a little text) in your example index.html (this one works if I don’t change anything, but if I change the text it’s not working anymore^^) but there’s nothing moving…I’m talking about this site here…if you have some minutes you may have a look on the code, I would be very greatful for that…sitting on it for hours now =)…but I capitulate now, really don’t know what the **** I’m doing wrong…
thx 4 the script anyways!
regards,
luk
Mar 3rd 2008
Utterlu great script! Just a quick question; when will Prototype 1.6.x be supported? It doesn’t work with that at the moment. Thanks!
Mar 3rd 2008
Just noticed a version supporting Prototype 1.6.x can be found here: http://www.aughenbaugh.us/accordion2/Index.html.
Thanks!!!
Mar 4th 2008
I’ve tried accordition 2.0 with latest version of prototype and script.aculo.us.
There are issues! The Scale effect works only first time, than the content of the menues dissapears.
Mar 17th 2008
Great Job. Just wondering whether it’s possible to have/use multiple “vertical_nested_containers” through the accordion menu?
Based on your example, could you have another new Vertical Nested Accordion option, say below “Changelog”?
If so, how can this be done?
Thanks.
Mar 26th 2008
I also noticed this thing completely breaks if you upgrade scriptaculous to 1.8.1. Any thoughts on this?
Mar 28th 2008
Great script…
But, I too am having issues with removing the nested content. When i remove the horizontal accordion code in the html, it breaks.
What am i missing?
Mar 29th 2008
Jeff,
You need to remove the init script for the horizontal accordion in the sample page; line #39 to #49 in the index.html sample page.
Hope this helps.
Apr 2nd 2008
We are using your Accordian version 2.0. we have copied the A Vertical Nested Accordian block again to create another pop up menu.And its showing perfectly in Mozila Firefox version2 ,But its not properly working in Internet Explorer properly.Plz help us.Thank you
Apr 2nd 2008
oh, i forget … thanks a lots Kevin for this absoluty great accordion !
Apr 5th 2008
Can Accordion 2.0 work with LightWindow? I would like to spawn lightwindows from links within an accordion, but i can’t seem to get it working. Are effects.js and prototype.js for lightwindow different from the same two files used by accordion?
Thanks,
Paul
Apr 18th 2008
Hello,
I am new to javascript I have used the Accordion v2.0 on this site http://www.tokyo1.gr/planatech and it seems to have problems with Firefox and IE. The wierd thing is that on Safari on OSX it works perfectly. Can you help me?
Apr 21st 2008
Hi,
Accordion v2.0 - Great script.
A bug - Open a panel, close it. Open it again. A flicker ? Bug ?
I am using it in one of my projects and will surely give you credit.
Apr 29th 2008
hi,
cant we add a color transition to this, as seen on this page
http://www.solutoire.com/experiments/mootools10/acc_ex3.html
(which is based on mootool)
thanks!
May 1st 2008
flicker issue. I’m guessing people are talking about when onclick() the content of the Div is visible before the header bar moves. I have the same issue. I’ll looking through the code now to see what can be done, but nothing jumps at me.
Thoughts? BTW I did the ‘height:auto’ -> ‘height:’0px’ with no effect.
Ta
May 6th 2008
Hey, fantastic script. One problem though, only got two js files with the download.
May 7th 2008
Hi Kevin,
Thanks for this easy to use and nice looking accordion. I have a question. Is there a way I can put a .swf object inside the accordion? So far I’ve tried with and tags and the .swf (an mp3 player) appears on top of the closed accordion, when I open the accordion, the .swf is at the right height, but when the accordion is closed the .swf can be seen. Any tips would be greatly appreciated.
-Inishi
May 7th 2008
I wrote embed and object tags, it won’t show stuff inside
May 12th 2008
Love the accordion function. Best one out there and way better than the AJAX ones. I am trying to customize some functions and I figured out that I could replace ‘click’ in the accordion.js file with ‘mouseover’. Works great for me… but because I have so many nested menus I would love to time them out so they close down (let say after a 5 second delay). What is the best way to do this? I’m not a programmer so bear with me as I try to fudge my way through this.
May 13th 2008
Accordion 2.0 is really well done. A couple of questions:
What kind of application does “Accordions will dynamically resize on content added REAL TIME!” refer to?
Can the accordion areas in your example (the little green bars with the star) be represented by a variety of different images? I’m guessing that’s in the CSS part.
Rock on!
May 14th 2008
hi, i’ve a problem, this fantastic menu don’t go whit explorer…where i make the mistake?
kikko088
May 20th 2008
Hi i’m having a problem with my accordion in IE he’s flickering all the time
http://www.wizz.be/beta/nl/home.php?frame=team#team
Can anybodu help me?
I’ve tried some things i found here but nothing seems to work :s
Miracle Men
May 21st 2008
Anyone complaining about flashing content should try putting ‘overflow:hidden’ in the accordion_content class, if they haven’t already. This fixes flashing in some circumstances.
May 30th 2008
Hello all,
I am trying to allow for my accordions to dynamically change speeds depending on a conditional statement. I tried creating a simple setter to set the speed of the Accordion (this.options.resizeSpeed) but I was having no luck … As I was poking around the accordion.js I noticed the accordion objects are created using Literal Notation. As I also discovered I cannot easily initialize different versions of the created objects and I would need to redefine our entire object just to accommodate this change.
This is a bit of a bummer for me and Im working on a work around, but I was wondering if anyone else has been working on dynamically controlling the speed of the accordion animation … or if this may possible be an inclusion in a future release?
Either way Im curious to hear from the community.
Thank you,
Eddie
May 31st 2008
This is great. Thank you. I noticed it was invoking QuickTime Player a little slowly with some of my video content, and realized that the MP4 file type wasn’t in the list. Rather than resaving all my MP4s as MOVs, I added it as a filetype and to the media clsid/codebase areas, and it flies! Again thank you for the open code!
Jun 1st 2008
How can I make this Accordion work with the newest versions of Prototype and Scriptaculous? I have found that the accordion works smoothly with the old versions that are packed in the download but I need the newest versions for other scripts operating on my site. How can I fix the wonky transitions that accordion has now? It starts with every tab open. Then after I close them, I cannot open them to see the content. It opens but the content is blank. Any thoughts?
Jun 3rd 2008
Sarah Coffey, you have a good point. I also cannot make Accordion work with the 1.8.1 build of Scriptaculous. If you look at the v.1.7 (Accordion version) of effects.js and the new 1.8.1 there are some differences in the code which makes either Accordion work or i.e Effects.toggle work. NOT both of them … sadly!
Will we have an updated version of ‘effects.js’ and ‘prototype.js’?
Thank you for an otherwise smashing product!
Jun 3rd 2008
If you always want one accordion pane open (like Apple Store), comment out
the this.deactivate() here
if (this.currentAccordion == this.showAccordion) {
// this.deactivate();
Kevin, this would be a nice option to have. “deactivate already activated tab”
Jun 4th 2008
The accordion also doesn’t work with the latest release of Prototype, as far as I can tell. I think it has to do with changes to the $H function, which now doesn’t do what it looks like the Accordion code is expecting.
So instead of saying, for example,
this.scaling = $H({
scaleX: true,
scaleY: false
});
I’m just using
this.scaling = {
scaleX: true,
scaleY: false
};
And then you need to change all the places like
options.merge(this.scaling);
to
Object.extend(options, this.scaling);
At least, for me, this works much better.
Jun 4th 2008
Hmmm, I’ve worked out a much-improved version (biggest improvements: 117 lines instead of 200, works with latest Prototype release). How do I contribute it back?
Jun 5th 2008
How can I disable the initial expansion of the accordion?
I want it disabled, and have been searching/testing the code for the past hour looking for the right spot?
Anyone have any suggestions?
PS: I’ll be donating; this script is great!
Jun 9th 2008
I figured it out.
If you want to no have the accordion load and OPEN…
Change the number here above 0…i made it 2
// Open first one
bottomAccordion.activate($$(’#vertical_container .accordion_toggle’)[2]);
}
Jun 10th 2008
I was able to add a second vertical nested accordion by duplicating the vertical_nested_container class and calling it vertical_nested_container2. You can add multiples from there. For example, the second nested vertical accordion would use vertical_nested_container2 instead of vertical_nested_container. IN the javascript, you also need to duplicate the nestedVerticalAccordion variable:
var nestedVerticalAccordion = new accordion(’vertical_nested_container’, {
classNames : {
toggle : ‘vertical_accordion_toggle’,
toggleActive : ‘vertical_accordion_toggle_active’,
content : ‘vertical_accordion_content’
}
});
var nestedVerticalAccordion = new accordion(’vertical_nested_container2′, {
classNames : {
toggle : ‘vertical_accordion_toggle’,
toggleActive : ‘vertical_accordion_toggle_active’,
content : ‘vertical_accordion_content’
}
});
Jun 11th 2008
Hi,
I have a little problem, like said DCT, I don’t know how to collect the id of my dynamic pane in order to stay him open and not always the first one.
Sorry for my English,
Thank you for an answer.
Jun 13th 2008
Hi,
I have solved the problem (thanks Firebug), in fact you must replace the 0 in :
bottomAccordion.activate($$(’#vertical_container .accordion_toggle’)[0]);
by :
document.getElementById(”openPane”).attributes[0].nodeValue
And now you have :
bottomAccordion.activate($$(’#vertical_container .accordion_toggle’)[document.getElementById(”openPane”).attributes[0].nodeValue]);
In your HTML/PHP code you must have something like that (in my case) :
$query = selectionner(”`idSections`,`nomSections`”, “`Sections`”, “LEFT JOIN `Sites` ON Sites.idSites=Sections.idSites”, “`selectionneSites`=’oui’ AND `enLigneSites`=’oui’ AND `menuSections`=’oui’ AND `visibleSections`=’oui’”);
$i=0
$j=0;
//Here the loop for the dynamic accordion
while($assoc = get_assoc($query)){
echo”;
echo ”.$i.’ ‘.$assoc[’nomSections’];
echo ”;
echo”;
…
I whish it could help you.
Sorry again for my English
Jun 13th 2008
The HTML code got a problem
while($assoc = get_assoc($query)){
echo’ ‘
echo’ .$i. ‘.$assoc[’nomSections’];
echo ”;
echo”;
Jun 13th 2008
Ok sorry, commentaries and html don’t works, if you have any problems send me an email at : nicolas.martinoPLEASE_ERASE_THIS_TEXT@hotmail.fr
Jun 13th 2008
Does anyone know why I can’t seem to combine the prototype.js file (and the entire accordion thus) on a page where mootools’ fx.scroll is active? When I try this, (mail me please for help or further details at leo@manenburg.nl) neither my scroll or the accordion seem to work… I used version 2.0
Jun 13th 2008
Is there a way to have links within the accordion content actually close and open various tabs of the accordion?
For example:
tab 2
tab 1
something like that.
Essentially I wish to allow users to navigate to other tabs in the accordion by clicking on links within the content.
Thanks in advance for any and all assistance.
Jun 16th 2008
Does anyone know how to fix the nasty flash for Accordion v2.0 when clicking on the same header three times? It bugs the hell out of me
Jun 18th 2008
Anyone out there that can help… please do. I’m a bit desperate heh.
I’ve been looking everywhere and trying everything to try to figure out a way to have different background images for each tab… someone posted something about it here earlier but it wasn’t a complete comment, part of their code got cut off. So that didn’t work.
Does anyone have any idea how this might be possible?
thanks
Jun 18th 2008
hhh
Jun 18th 2008
Anyone else have an issue where there are black bars inside each white area at the top and bottom w/ ie6? I’ve tried it on 3 computers - all have the same issue.
for example - click the first button. There is a black bar between the ‘Whats new in 2.0′ and the menu button, as well as one between ‘… lots of bug fixes’ and the next menu option. It shows up like this for all of them, except the ‘Help me get a MacBook Pro’ one. That one shows up normally.
it’s about the height of a 12pt font row of text.
Jun 19th 2008
Accordion is really neat. Thanks for the great work.
Quick question: is there a way to configure the accordion so that when you click on a tab the other open tab remains open as well?
Thanks.
Jun 19th 2008
I need JUST a horizontal accordion.. not the vertical! I tried to pry the embedded horizontal code from the example but it broke significantly. Can someone post JUST a horizontal accordion demo?
Second question.. in the embedded horizontal accordian, why can’t it be left justified?
Jun 19th 2008
Does anyone have the fix for accordian 2.0 with the latest release of prototype.js?
Jun 20th 2008
Hi,
I had a problem with unfolding…
The width of my elements was gone and eventually this caused to NOT display the content when unfolding!! Very frustrating, but I found the problem.
In your demo the width and the height do not get set through the accordion, I added these with the following code making it work again:
activate : function(accordion) {
if (this.animating) {
return false;
}
this.effects = [];
this.currentAccordion = $(accordion.next(0));
this.currentAccordion.setStyle({
display: ‘block’,
height: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
width: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
});
… etc
Keep up the good work, your scripts work great!!
Best regards!
Mike
Jun 20th 2008
I am using the accordians for my band’s website. I am encountering a problem in IE 7. When I use more than one nested horizontal or vertical accordian on the same page, the second one of the type is always open. This does not occur in Firefox or Safari. Anyone have any ideas on this? has anyone else had this problem?
Jun 22nd 2008
Hi, this has been asked previously..
any one out there know how to configure different background images for each tab?
any help on this would be great!
cheers.
Jun 26th 2008
Hi,
I keep on having this flickering problem with Accordeon V2.0. Al of the above solutions didn’t seem to help. I discovered that when I add a Doctype the problem is solved. However, i can’t add one, because it messes up my whole html page, and there’s not enough time to rebuild.
Any ideas how to stop this flickering?
Tnx!
Bart
Jul 9th 2008
Also looking for the Accordion with the fixes for the latest Prototype.
Jul 11th 2008
For latest prototype fixes…
1. Anywhere it’s calling Hash.merge, change to Hash.update. Merge was changed to merge two Hashe objects and return, rather than updating main hash.
2. Anywhere it’s passing a Hash to a function, call toObject() on the Hash. The newest Hash objects are not backwards compatible with previous version.
Jul 14th 2008
Does anyone have the fix for accordian 2.0 with the latest release of prototype.js?
Jul 14th 2008
Does anyone have the fix for accordian 2.0 with the latest release of prototype.js? adelsi [at] cox [dot] net
Jul 14th 2008
This widget is not keyboard accessible.
Should not be to hard to make it work with a keyboard.
Mark
Jul 17th 2008
To prevent the script from flashing or flickering in IE, always make sure you use a XHTML DocType.
Jul 18th 2008
Gertjan you are the man, or the woman…I’ve been reading these posts and the threads for almost 2 days now trying different fixes for the flashing problem, the XHTML doctype solution worked, thanks.
Jul 23rd 2008
I have a client who loves this script, however they asked about the possibility of having it auto-run and cycle through the panes with a timed variable. Does Accordion v2.0 have that functionality? If not, what is the possibility of implementing it? My client would be willing to pay for the accelerated implementation of the feature.
Thanks
Jul 26th 2008
Damn! i lurrrve it
thanks mate
Jul 29th 2008
I was working with your accordion code, and I noticed what other people above have noticed. That the script does a quick flash of being full before going through the animation of opening.
I managed to fix this problem in your script. In a nutshell, the crux of the issue is that if you shrink down to 0, many browsers assume that 0 means to auto adjust the size of the block which causes the block to pop back to a larger size that all of it’s content will fit into. The quick jerking motion is the script setting a block’s display to “block” while the size is 0. When the size adjustment begins to move away from 0 to 1 or higher, the animation looks perfect. My fix (and I’m sorry, I don’t have the code on me at the second) is to adjust down to 1px or 1% (I can’t remember which) then change the display to “none.” This gives it a very seemless look for both enlarging and shrinking. On the enlarge you display:block then adjust from 1 instead of 0. On the shrink you go to 1 and then display: none;
Aug 1st 2008
Great script, nice effect. But I’m getting an error in IE 7.0 & 8.0 stating that an “exception is thrown and not caught.” The script still works, but if you load the page in IE 8.0, it brings up a dialog asking if you want to debug. The client won’t be too cool with that. Here’s the site I’m trying to implement it on: http://www.stewartcreativedesign.com/biotest/
Any help w/ this would be greatly appreciated.
PS - Ignore the huge flash file @ the top of the page. It’s still being created/compressed.
Aug 1st 2008
Please disregard last post. I managed to fix it myself… just had a little extra code left over in there from the nested menus examples, which I wasn’t using.
Aug 1st 2008
I’m trying to do an accordion with rounded corners on the top and bottom accordion_toggles, so when the toggles are all closed it looks like a box with rounded corners. I can get the rounded corners if I use a style in the div to override the background url in the class and the accordion will open and close, but then it won’t switch the background image at all.
Is there any way to have a different changing background for the top and bottom toggles?
Aug 1st 2008
Any chance that anyone knows why Accordion 2.0 absolutely won’t play nice with dir=”rtl”?
Aug 4th 2008
Amazing script well done!
okay my question - using your demo as an example, the accordion can currently slide open from closed, to open on “Changelog” (so animating from closed accordion to open “Changelog”). The effect i would like to achieve onload would be a transition going from “Changelog” to “Donate! Help me get a MacBook Pro”. So the accordion would already be open on “Changelog”, and as the page loads it would transition to “Donate! Help me get a MacBook Pro” - from one to the other. Any ideas on how i might go about this?
Thank you very much!
Aug 5th 2008
HI There Can anyone post final solution for all IE problems please, much appreciated.
Aug 6th 2008
We’re having trouble with our horizontal implementation for a client site. A relevant page from the dev site is located here: http://ubhipdev.com/products/chairs/delano/
The accordion is towards the bottom of the page. We’ve found that if there are “too many” characters in certain sections, that the footer below will “bounce” when one of the accordion bars opens. I’ve tested this by putting only one character in the first two bar sections, and the bounce goes away. It occurs on FF and Safari, but interestingly not in IE7.
Aug 7th 2008
Hello
Well, I’ve re-read all these posts, but I still don’t really understand how to hide the panels during contents loading…
I tried this with no success :
var topAccordions = $$(’.horizontal_accordion_toggle’);
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: ‘0px’
});
});
Does anyone know how to deal with that issue ?
Thank you so much
Aug 10th 2008
Is there a way to add an onClick event to the tag or to any of the content within the tab? When someone clicks the text to expand the corresponding accordion layer, I’d like to also call an AJAX script that shows a page within another layer, however when I apply the event it currently gets disables upon loading. Any help would be appreciated.
Aug 11th 2008
@michael: If you register an event using prototype’s Event.observe method (http://www.prototypejs.org/api/event/observe), I believe you will have better luck. I’d recommend against using the element’s onclick method when registering multiple events to the same element, since it is easy to clobber previously assignment event handlers.
Aug 12th 2008
hey keven!! how are u doing?
Im very impresive with your code!
But i ‘ve some problem… i would like to do little modifications…
can i help me?
i want to modify de delay of image when i click …and modify that onclick to onmouseover..
what part of the code i have to change??
Thank you!
CyBeRoX
From Brazil!!
Aug 14th 2008
Hi,
Nice Accordion script. I have added it in www.downloadjavascripts.com . Good stuffs are always valuable possessions, So keep providing them.
Aug 18th 2008
Has anyone else run into a scrolling problem with Firefox? If I create a css scroll box and embed it into one of my accordion blinds it works and scrolls. Looks great in safari, but when I open it in firefox the scroll bars won’t go away when I open the next container. However, if I switch tabs and go back it looks like should. This seems like a firefox bug to me, but I can’t for the life of me figure out how to fix it.
Aug 24th 2008
Hello,
I have problems with an update to Prototype JavaScript framework, version 1.6.0.1!
The “function loadAccordions()” doesn’t work correctly. It doesn’t open! Is there a soltion to use accordion V.2 with framework, version 1.6.0.1?
Thanks
Greeting from Germany
Aug 26th 2008
How would I go about editing the code to make the accordions closed when the page loads. By default, it opens the first tab. I would greatly appreciate it if someone can give me some direction on this, thanks!
Aug 27th 2008
Hi,
I applied the patches and set this project up at GitHub.
http://github.com/yves-vogl/accordion
Yves
Aug 28th 2008
Hi!..
I run ligthbox in my website and all run Ok, but if I execute a Ajax module in the page, the Ligthbox not run…Why not Run?? That’s the problem??
Thanks!!
(Sorry for my English)
Sep 3rd 2008
Hi, the page you download still has “Accordion v1.0 Demo” title.
Btw nice work, thank you so much!
Sep 4th 2008
I know very little about js and website developing but what I am looking to do with accordion is hide content that exceeds the size of the accordion height (horizontal accordions) and instead have a scrollbar within the accordion instead of for the whole page.
There is a post a little ways up about doing this but I couldnt decipher what the guy was saying to change in the code.
Sep 8th 2008
hiya, love your Accordion; absolutely beautiful!
one thing though, it doesn’t work with the latest version of Prototype (1.6.0.2); once fired it just shrinks horizontally the content of the accordion rather than smoothly opening & closing it.
works fine with the version you’re using on the demo site (1.5.1.1) though.
any way you can look at this & maybe upgrade the codebase, would help a lot of people out; the thing rocks!
all the best and have a fantastic week, keep up with the good work.
John.
Sep 8th 2008
awesome work Trey, you’ve saved my bacon.
http://www.aughenbaugh.us/accordion2/Index.html
…and yep it works with google’s jsapi service
google.load(”prototype”, “1.6.0.2″);
google.load(”scriptaculous”, “1.8.1″);
Sep 13th 2008
Yeah just had the “Flickering” problem and solved it by copying the DOCTYPE declaration from the stickmanlabs demo site - just to be sure.
Its simply…
Found I had to go to work on the CSS classes to make them cross browser compliant again, but small price to pay. Hope it helps someone.
Sep 17th 2008
Hi - awesome script for the accordian, one thing though. I’m trying to use it with a page already using the latest prototype and scriptaculous.js and its not jivving with effects.js.
Any thoughts?
Sep 23rd 2008
how do we get this thing to work with the current releases of prototype and scriptaculous..? not sure what to do here..
Sep 23rd 2008
I was wondering how to use flash video in the pop up. Is that possible?
Sep 24th 2008
Hey Kevin, your script is awesome!
I try to embed it into my wordpress theme.
For some reason it’s not running.
please have a look at my page. Maybe You can give me a hint!
I will appreciate it!
Regards
mARTin
Sep 24th 2008
Thanks for the awesome script Kevin and thanks to Yves for applying the patch and getting it hosted.
Sep 26th 2008
First, sorry for my English.
Is it possible to leave the accordion “expand all”? How is this done?
Excellent lib… Thank you very much!
Sep 26th 2008
I wil play anyone that can get this accordion to work along with scriptaculous Sortables.
Email me for amir.meshkin@gmail.com for details. I hate javascript, and I’m pulling out my hair here trying to get this to work well together.
Sep 27th 2008
When I include jquery.js for a modal that i am using on my page, all the accordions stay open and have no functionality. Do you have any idea whats causing this bug?
Sep 27th 2008
I tried setting the accordion_content with a “height: 300px !important;” . Whenever I do that it opens to 300 high but it doesn’t glide open it just snaps open?
Any ideas how to tweak it to make it glide open to 300px height???
from lightwindow.css:
.accordion_content {
background-color: #ffffff;
color: #444444;
overflow: hidden;
height: 300px;
/* height: 300px !important;*/
}
TIA palnudb
Sep 30th 2008
Help!
With this accordion, is it can leave assets over 1 DIV? Or leave everything collapsed?
Oct 1st 2008
Hi the accordion script is a great additon to one if the sites I have developed for a client, but for somre reason there is a bounce when changing panels.
I have managed to select a pamel for each relevent page using a JS array which also works great. just this bounce to deal with. When the panel first opens the transition is very smooth, but you will see what happens when you click a panel, this is making my client a little bouncy lol
Oct 3rd 2008
Ignore my previous post - solved it with help from Lynda -
thanks
Oct 8th 2008
Thanks for the updates and patch. I was having a hard time figuring out why the latest Prototype framework broke it! Few!
Oct 13th 2008
Hi there,
Great widgets!
I have a question: i’m using your LightWindow on a page with a form, and it seems that the (other) form elements are not submitting now. Do you know why?
(It’s a shame, cos we really need to have a modal light window from a page with a form).
Thanks,
Ravi
Oct 13th 2008
Kevin,
Thanks for the great Accordian code. This would help out on a project that I am working on. Do you have an email account that I can send a question regarding your Accordian v2.0 license?
Thanks.
Mark
Oct 15th 2008
Nice work.
Accordion doesn’t work with prototype 1.6.x though. To fix it, you just need to remove all the $H functions and replace them with pure hashes. Then use Object.extend instead of merge. For example:
var options = $H({
sync: true,
scaleContent: false,
transition: Effect.Transitions.sinoidal
});
options.merge(this.scaling);
becomes:
var options = {
sync: true,
scaleContent: false,
transition: Effect.Transitions.sinoidal
};
Object.extend(options, this.scaling);
Works in IE 7, FF3, Safari 3. I’m sure there’s another way, and not sure why $H isn’t working, but I wasn’t interested in finding out
J
Oct 15th 2008
I’m interested in using the accordion script, but inside of a Websphere portal system — the script works fine until I put it inside a portlet and then it no longer works. Any thoughts?
Oct 16th 2008
Hey,
I’m using the accordion and I love it.. but,
is there any possibility that I can open a “tab” by clicking on a link.
Something like:
Open tab
Oct 17th 2008
I ran v 1.0 of this script on my site, recently did a re-design and tried to re-implement v 2.0 not working, I can not even get the downloaded demo to work. I only want the vertical menu I do not want the nested horizontal menu. I used the code framework found in the demo, but when you delete the nested horizontal divs you loose functionality for the entire script???? There were three posts above with the same issue, no one has posted a fix, is there a fix? Please help!
http://www.jonbrown.org/help/
Oct 26th 2008
Hi,
How control the accordion with an extern navigation.
Nov 2nd 2008
Even with the fix it does not work.
someone has a version of the accoridon.js that works with the latest version of Scriptaculous ?
Nov 3rd 2008
Hi and thanks for your excellent Accordion Script.
I have applied it to several pages within the site I am currently working on and the effect is just what I was after.
However, my accordions do not appear to all be opening.
Have a look at the site and let me know if there is anything obvious that jumps out at you http://www.looseconnection.biz/testingserver/titanic
The accordion on the Itinerary page seems to be working fine but the accordions on the Our Ship and Costs page stay closed on page load… I simply cannot work out why this would be… Do you have any ideas?
Any help with this would be greatly appreciated (and ill even donate towards your mabBook).
Cheers,
Padz
Nov 3rd 2008
*mac book
Nov 3rd 2008
To all those who want to use multiple instances of the accordion: it’s simple. Just duplicate the “new accordion()” bit.
Not sure how to post code here, so I suggest you just check up on my site. I have 4 accordions in place, the divs are called col_0 to col_3 (it’s dynamically generated). And right before the div, I call the necessary javascript INCLUDING the initializing.
Actually, it results in a nice effect of the initial divs opening sequentially
Nov 7th 2008
Hi, I just downloaded the most recent accordion code, but its super buggy in IE 7. when I view yours, its not as buggy…Have I done something wrong or can I do something to fix this? I searched your site high and low for a contact email, but couldn’t find one.
Please write me back at my email provided! Great script!
Thanks,
Paul
Nov 12th 2008
I have a modified version of this script that does not use any of Prototype’s depricated code. So it works well with version 1.6.0.3 and the latest scriptaculous effects.js. Also, I’ve enabled the script do both ‘click’ and ‘mouseover’ at the same time. Well, mouseover for mouse users and click for keyboard users. Basically I have two event listeners. One for onmouseover and one for click. And to make it all work nicely, I added a timeout to the mouseover and mouseout to keep the accordion from being activated accidentally by users with nervous hands. So, where can I send this so everyone can try it out?
Nov 15th 2008
It was a tough day today. I accidentally deleted your email and wasn’t able to recover it. Email me again at derek @ derek-owca.com for the latest…
Nov 21st 2008
Derek, any chance you can post your code somewhere like Rapidshare? I’d love to see your version. Thanks.
Nov 22nd 2008
Hey Derek I have 3 dedicated servers and would be more than happy to post your code and tutorial if you have one.
I would love a version that works with prototype 1.6+
Email me or let me know thanks
Dec 2nd 2008
http://derek-owca.com/stickmanlabs/
Dec 4th 2008
hi.. im developing a web page for my collegue.. your accordion is excelente but i have a few questions.. 1) when i tried to change the defaultsize (height) in a vertical accordion, the pages flashes the new size but atomatically it resize again on content added
2) i need that the accordion stay open on page load (without the open effect)
hope somebody helpe .. PLEASE
Dec 10th 2008
This would be great if it worked. I can get a local copy of the accordion page and gut the thing but as soon as I delete or even comment out the horizontal nested one the thing just stops working.
Dec 10th 2008
Even 3.0 is doing the same thing. I ditch the nested sections and it just stops working. Even trying to replace the nested divs with another kills it.
Dec 15th 2008
Thank you, Kevin, for this extremely simple accordion. It makes my site shine.
And thank you, Justin Luk, for the added “alwaysopen” bit. Now, my tabs won’t collapse and ruin my layout.
Thanks.
Dec 19th 2008
Hi Kevin,
Thank you for your great work with this script. And a ‘thank you’ also to all the others mantaining the code and helping out everyone with the newer versions of Prototype and Scriptaculous. I’ve used this code in a web site and it suits like a charm. I’m now with the task of upgrading the code to the newer versions and that´s still to be done, but I hope to improve it in the future and I’ll make it availlable to all.
Thank you,
Rui Carvalho
Dec 22nd 2008
Has anyone completely solved the flashing issue? I see that several suggestions had already been implemented in the latest code I have (overflow set to hidden, 0px instead of auto etc.) but I have tried all the other suggestions and keep getting the flash. I am using the accordian as a nav for pages that all include the accordian so whenever you click a link in the nav, the page reloads and the accordian is always expanded first. I have tried adding that “fix” to the bottom of the page as was shown in the demo, but it does nothing. This is a deal breaker for using this code if there is not a real fix. Thanks
Dec 28th 2008
In case any of you have problems with Internet Explorers that do not open the accordions and generally don’t work: it is likely that in your adapting spree you left some excess commas in there.
Make sure that no comma is BEFORE a closing bracket.
like
var {something, something else, }
That last comma will fcuk it all up
Jan 2nd 2009
Hello,
I am trying to have nested vertical accordion. And I want the top level accordion to open on “Click” and the second level to open on “mouseover”.
Can anyome please help me with this?
Jan 8th 2009
I figured out how to solve my problem, I dropped the idea of using this.
Jan 12th 2009
Hi, The code is awsome but a small tweak need to be added. Actually i am in need of placing the content first and then the toggle.
so the code should be like
Is there any tweak to be done. I simply tried to move the code like as above, but it didnt work.
Please help….
Jan 12th 2009
Sorry for posting again some code is missed earlier
Hi, The code is awsome but a small tweak need to be added. Actually i am in need of placing the content first and then the toggle.
so the code should be like
content-toggle-content-toggle-content-toggle
Is there any tweak to be done. I simply tried to move the code like as above, but it didnt work.
Please help….
Jan 12th 2009
how to get the code for by default to set all three right rather than one left and rest right.
thanks in advance
Jan 18th 2009
Hi,
I used this accordion to display one type of content on my website and I would like to display another type of content with fade-in blocks. To do so I need to close any active toggle otherwise blocks and the accordion would overlap.
I tried the code below, given by Brian the 22nd of January 2008, but it doesn’t work : Firefox tells me that my accordion is not defined (but it works if y put it in the LoadAccordions() function)
onclick=”topAccordion.activate($$(’#mainAccordionContainer .accordion_toggle’)[1]);”
How should I do ? I’m not verry confortable with javascript, I understand that the variable is not global but it doesn’t help so much :p
Thx
Jan 20th 2009
Can we activate a menu without see the effect ?
I manage to open my menu with JS but i can declare the variable the.showAccordion with the name of my opened menu !
Feb 3rd 2009
For all the people which had the problem with nested vertical accordions, it was not working correctly because all nested accordions have the same id(vertical_nested_container).
Easiest solution is to make each id for vertical_nested_container unique(vertical_nested_container_0, vertical_nested_container_1, vertical_nested_container_2, … for instance).
After that you need to “register” all nested containers. This can be done in for loop :
function loadAccordions() {
var bottomAccordion = new accordion(’vertical_container’);
for (i = 0; i
Feb 3rd 2009
function loadAccordions() {
var bottomAccordion = new accordion(’vertical_container’);
for (i = 0; i
Feb 3rd 2009
To whom it may concern, I was running into the issue where the content was overlapping while it was in motion, like Gash above. To fix it in FF, I had to add:
.accordion_content {
overflow:hidden;
}
However, I was still having the problem in IE7. My content was in a ul with li’s under it. I finally found that my li’s had “postion:relative” set on them. Removing this fixed the problem.
Feb 10th 2009
Hi
Impressiv work
But like quite a number of people (see Geo’s cimment a few comments back) I’m not able to open a tab from an external link
It says that topAccordion is not defined .
As Geo said , it seems to be a variable scope not being global . . .
Grin grin ….
Any idea ?
Feb 10th 2009
Hi there,
Great script, seems to be the best one out there even after a couple years. However, I am also have the “bouncing” problem that Adam described on October 1, 2008. I have tried all sorts of CSS changes, but no luck. The script works just as smooth as can be on the first click through each toggle. But the moment you click any of them a second time, it makes the toggles below it bounce down slightly before scrolling up, taking away from the smooth window shade look. If anybody has figured this out, I would appreciate the help.
I noticed Kevin made one reply in 2007, but nothing since. Is he still maintaining this script or reviewing comments on this site?
Feb 10th 2009
The bouncing seems to only be an issue in IE (using IE7) - Firefox is working smoothly. Maybe this is a problem all around because I tried Kevin’s demo in IE and it does the same thing on some of the tabs
Feb 12th 2009
Please update the code on stickmanlabs.com with the version that works with Prototype 1.6: http://snipplr.com/view.php?codeview&id=5502
Feb 16th 2009
Hi all,
Not sure if anyone has encountered this too while using the script.
In a nested vertical accordion, I’m trying to make the accordion_toggle to collapse instead of having the content to close upwards, is there a way to achieve it?
For e.g. I have 3 accordions nested vertically.
Content1 has a more lengthy content that takes up more than 1 page, the user has to scroll downwards to read the entire content, after reaching the last line of Content1, let’s assume it’s instinctive for the user to click on the Toggle2 below to open up Content2 instead of scrolling up to click the toggle for Content1 to close it, hence, when Toggle2 is clicked, it will move upwards to close Content1 and the user has to scroll upward abit more to read the first line of Content2. This can be quite annoying and confusing.
Is there a way to make the Toggle to collapse instead of the Content to close upwards?
Anyone has a solution to it?
Thanks for the help!
Feb 16th 2009
Oh shit! Didn’t know “
Feb 20th 2009
Trying to use the accordion with prototype 1.6, and it doesn’t work. If I use the prototype provided with the download all is great, buy when trying to use it bundled with the magento prototype version 1.6.0.3
Do you have a fix for this?
Mar 2nd 2009
I am having the same exact issue as Janis from Feb 16th.
“In a nested vertical accordion, I’m trying to make the accordion_toggle to collapse instead of having the content to close upwards, is there a way to achieve it?
For e.g. I have 3 accordions nested vertically.
Content1 has a more lengthy content that takes up more than 1 page, the user has to scroll downwards to read the entire content, after reaching the last line of Content1, let’s assume it’s instinctive for the user to click on the Toggle2 below to open up Content2 instead of scrolling up to click the toggle for Content1 to close it, hence, when Toggle2 is clicked, it will move upwards to close Content1 and the user has to scroll upward abit more to read the first line of Content2. This can be quite annoying and confusing.
I know there is a simple fix for this I just don’t know how to do it.
Is there a way to make the Toggle to collapse instead of the Content to close upwards?
Mar 2nd 2009
Hi sir,
It was great to work with new ur version 2.0 of accordion.
But i have some Problem and i couldnt fix the issues raised by it. Can u help me in this. Actually im trying to create a 10 number of vertical title bar and inside that two columns with three rows had maade in vertical nested toggle. Its well working in Moxilla Firefox but in IE version 6 its not working properly. I couldnt found out the mistakes. Pls someone help me to fix this issue.
Thanking you
Mar 5th 2009
Hi trying to implement the fix for the flashes, where do I place this:
var verticalAccordions = $$(’.accordion_toggle’);
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: ‘0px’
});
});
I’ve tried several locations, I really just don’t know, but so far it hasn’t done anything.
Is this placed in the html or the Js?? and exactly where. Any and all help is much appreciated.
Mar 9th 2009
perhaps someone can help put together a more complete tutorial on this script, and I’m also happy to donate to the cause…
I’ve pulled together the latest scriptaculous & prototype versions, the version of this Accordion script that was supposed to be working for v1.6 (prototype) & v1.8 (scripaculous), [see about 10 posts up for the code: http://snipplr.com/view.php?codeview&id=5502] and am still not able to get a simple horizontal accordion to work.
this is really worth spending time on, there are no quality horizontal accordion scripts out there, and I’ve seen a few sites use Flash to get the effect, which of course is so much more cumbersome thank scripting.
please help; I’d also be willing to pay someone who has gotten this to work as a freelancer. we’re trying to replicate the www.bu.edu homepage (without all of the Flash & movie sub-frames inside each ‘toggle’ menu, just content and images).
Mar 10th 2009
I do love this accordion (if it wasn’t for the flashing..) but so far it has been the only one I could combine with lightwindow (combined with slideshowpro)! thank you very much for sharing it!
@STEPHAN, if you really can’t get this one to work try having a look here, maybe you find some other accordion you like..
http://dzineblog.com/2008/10/30-animated-tab-interface-and-accordion-scripts.html
hej då!
Mar 12th 2009
impressive!
Mar 15th 2009
Can anyone helped with the problem I posted 9 posts above? I have tried a considerable no of weeks and am still pulling my hair for this.
Calvin Waterman, did you manage to get a working solution to this?
Thanks for any help in advance.
Mar 20th 2009
hey guys,
believe it or not, with the new version of Internet Explorer 8 the accordion flows smooth as water.. no flashing at all!
(I’ve played around for 10 minutes and it didn’t flash even once, would be nice though if somebody else could confirm that as well)
charlie.
Mar 24th 2009
hello,
can you help me for the script not support Prototype (latest version)?
anyone have update it?
Mar 24th 2009
I am currently having trouble implementing a single horizontal accordion:
http://www.technologistsinc.com/testingsite2/working/projects/proj_aiebag.php
The slides all show up together as the page loads, then they order themselves. This is especially jarring on slower-loading machines. What can I do to alleviate that?
Mar 24th 2009
i llove this song!
Mar 26th 2009
Location of my problematic development of kevin’s implementation has moved to:
http://www.technologistsinc.com/testingsite2/OLD/proj_aiebag.php
If anyone has a suggestion as to why I cannot make the left-hand panel open on load, please reply here…
Thanks in advance.
Tony
Mar 27th 2009
Hi, im newbie in js so my question is simple i think,
How to make two ora three panes open at the same moment
i have tried but it doesnt work
function loadAccordions()
{
var bottomAccordion = new accordion(’vertical_container’);
bottomAccordion.activate($$(’#vertical_container .accordion_toggle’)[0]);
bottomAccordion.activate($$(’#vertical_container .accordion_toggle’)[1]);
}
I assume it needs some changes in core script. Any help?
Apr 16th 2009
I have the same question as the guy above me, how can I have more than one pane open at the same time?
Apr 18th 2009
Hi
great script, works fine. Thank you!
But i have a small problem. I want to add a link in
Name of tab Google
…
the link is not working. Just the accordion expand, but the link is not loading.
Can anyone help me please?
Thanks
Apr 18th 2009
Hi
great script, works fine. Thank you!
But i have a small problem. I want to add a link in
Tabname link
…
the link is not working. Just the accordion expand, but the link is not loading.
Can anyone help me please?
Thanks
Apr 18th 2009
This script has been quite helpful. Thank you so much. I am new to CSS web development in general and am attempting to use your horizontal accordion as the main piece of this site I am working on. The accordion seems to be breaking if the window isn’t open to its max and also isn’t working in IE. I am trying to do some other things, but am mostly concerned about getting the accordion to work properly. Any advice will be most appreciated and am also willing to pay.
The site is: http://www.jwtdesign.com/clients/tsnav/ts_index.html
Apr 21st 2009
Great Script! very useful.
I’ve uploaded a patch. So, it can now works with the latest scriptaculous.
http://dl.getdropbox.com/u/824603/accordion-scriptaculous-1.8.2.patch
Thanks!
Apr 22nd 2009
@Tony MacFarlane - did you figure it out? I’m having the same problem.
May 3rd 2009
I am using the swf 2 object to embed a flash movie into an accordion content. It works great in FF. However, in IE the flash movie continues to play in whatever accordion it’s in after that content has been deactivated by another accordion’s activation. I am very new to CSS and coding in general, so any rather explicit help would be greatly appreciated.
Thankyou,
-Jake
May 6th 2009
[b]KAUFEN VIAGRA
VIAGRA KAUFEN - 0.90 EUR Pro Pille >>>Jetzt Kaufen!> Klicken Sie Hier >>Jetzt Kaufen!
May 12th 2009
Has anyone successfully gotten the accordian to open the first frame (both the vertical and an embedded horizontal one)? I know the demo does it successfully, but I even pulled my code straight from the demo and can’t get it to start with the first frame open.
Anyone else?
May 15th 2009
Thanks bird for the patch file. I started down that road by hand earlier today, but then I found your patch. saved me some time.
Works great now.
May 15th 2009
how can you make the headers workable links?
May 15th 2009
The accordion v2 is working fine with effects 1.8x and prototype 1.6x as long as you update with the links provided above.
In either case I need assistance with a slight issue I am having.
I am using the accordions to showcase a portfolio. Within each panel there are a series of thumbnail images that load and when clicked on open a LightWindow, etc.. The issue is that on page load all of the content has to be loaded in, so there is about a 10second wait, depending on your connection, before you can actually interact with the page.
Is there any way to get the accordion content to load when that specific accordion panel is toggled open for the first time, as opposed to on page load.
To see what I mean go to:
http://www.vd3d.com/port
Any help would be greatly appreciated.
-Bri.
May 27th 2009
Finally got this to work with 1.8 and 1.6 after reading the comments.
Thanks
May 28th 2009
How to print open accordions? /link rel=”stylesheet” type=”text/css” href=”print.css” media=”print”/
i can only print active accordion but i can’t print all because javascript didn’t display not active ones
May 29th 2009
when i found it, i like accordion very much, but now i’ve some problems with the lightbox (for the images) and IE (for the horizontal nested accordions)
you can see it here: http://www.goodstaff.it/accordion
i’ve seen a lot of forum, but without an answer yet.
Jun 8th 2009
hi
Thanks for your advance script!
But I have a major problem, when I try insert a LOGIN FORM in one of accordion’s part, it does not work in IE6 & when I click on form tab, all of accordion’s tabs that are under of it, break & not works! until refresh page and repeat error…
It’s a major problem for me, maybe help me PLZ!
Jun 12th 2009
ooook! now i’ve your lightwindow too!
Jun 29th 2009
can anyone share how they did a collapse-all with this? i’ve worked out a few ways, such as loadAccordions(), which simply returns everything to its original place. however, it also +1s the actions, so that if i click a tab again, the pane is opened twice, thrice, 4x, etc, depending on the number of times i click the loadAccordions() function.
any enlightening thoughts here?
Jul 1st 2009
Sadly, it seems that this script is not 100% compatible with Prototype 1.6.0.3 and Scriptaculous 1.8.1. It still works (kinda), but not smoothly, and the effect is more of a shrink than a slide.
Jul 2nd 2009
Hi Kevin,
I have downloaded Accordion 2.0 and it is such as great program. I am using it for an A-Z directory with each tab labelling as A-B, C-E, etc.
However, because users won’t know what subjects there are behind the A-B tab, they will have to click on it to know whether the subject they are looking for is there. I have created a “How to use this directory” tab as the first tab and wanting to know whether I can add hyperlinks within the content of this tab, and onclick, will open the relevant tab, i.e. open the A-B or C-E tab etc.
I have tried using simple HTML anchor/bookmarks and that won’t work. Have also tried setting up the “A-B” link on the 1st tab to call the Javascript function to open “A-B” tab, but I couldn’t work out the code?
Would you please be able to help me and tell me what code I should put in?
Thanks a lot,
Jimmei