stickmanlabs

Rock on…

& the link on the right does not go to version 2
Dave

hmm… that should say the terrific but under-used “dl” tag

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.

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.

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.

(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 ^^

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!

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.

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?

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.

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

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….

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!

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!

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!

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’
});
});

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

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!

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.

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

Hi Marco

Do you know how to adjust the css or js so I can create customizable tab backgrounds??

Ciao Valentijn

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.

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….
Must be a better way You can reach me at ontwerp AT zonnet.nl

Ciao

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 ??

Looks great. What is “MIT-style” license? Do you have the exact text?

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

My accordion works perfectly in IE7 but not firefox????? what sort of things can i look for?

chad.camacho@gmail.com

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

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

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.

damn!

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.

does not work after upgrading to Protype 1.6.0 final…

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?

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

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!

Thanks Ryan!
Your solution also worked for me.
perhaps kevin can release a new version.

ciao,
der flo

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

Hi Corinne,

No, my comment was a general one.

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

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

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!

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?

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

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]

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’
});

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.

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

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

Accordion doesn’t work with prototype 1.6.0 (as mentioned above). Can we expect an update soon?

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?

i have a problem with ul/li toggle. in this html element no toggle working???

Keith,

When I click on your link I get a 404 error. Can you update the link?

Ben,

Hello,

my simply code:

dog
cat

1
2
3
4

dog
cat

1
2
3
4

Ben,

yes i using ul/li as headlines (my accordion_toggle) and expand the “1 2 3 4″ (my accordion_content)

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.

Oh crap! It stripped my tags! Has anyone else had any luck publishing HTML snippets in this forum??

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.

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.

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.

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!

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

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.

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)

Thanks Seengee, effects are now working!!

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

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

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!

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.

oh… i will post the code again.. :

Link 1

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.

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

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’
});

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

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!

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’
});

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!

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.

I also noticed this thing completely breaks if you upgrade scriptaculous to 1.8.1. Any thoughts on this?

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.

oh, i forget … thanks a lots Kevin for this absoluty great accordion !

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?

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!

Hey, fantastic script. One problem though, only got two js files with the download.

I wrote embed and object tags, it won’t show stuff inside