Comments on: Creating an Accordian Widget Class with Prototype

By: CFDev

CFDev — Fri, 22 Feb 2008 21:00:57 +0000

Awesome script, thank you. Is there any way to have an item open by default? I’ve been playing and have this:

Event.observe(window,’load’,init,false);
function init() {
accordian = new Accordian(‘sectionContainer’,'h3′);
var section = $(sTickets);
this.currentSection = section.id;
var contents = document.getElementsByClassName(‘contents’,section);
contents[0].show();
}

But it requires me to click the open section before clicking another…

By: C. James Callaway

C. James Callaway — Wed, 28 Nov 2007 16:59:25 +0000

Thanks for the great tutorial. With this information I was able to write my own definition list based accordion control (only 2.1kb).

Keep up the good work, thanks again.

By: JP

JP — Wed, 08 Aug 2007 15:41:40 +0000

Does not work:

Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /home/bookm6/public_html/tree3/db.php on line 5

By: CustomPartner.com » Creating an Accordian Widget Class with Prototype

CustomPartner.com » Creating an Accordian Widget Class with Prototype — Thu, 19 Jul 2007 16:57:44 +0000

[...] found this little gem from Greg over at Graphics by Greg the other [...]

By: Eli

Eli — Wed, 13 Dec 2006 21:01:11 +0000

Cool function, I’ve seen this done in a very much similar way: http://moofx.mad4milk.net/

P.S. Don’t know if you intended it that way, but Accordion is spelled with an O. http://en.wikipedia.org/wiki/Accordion

By: edward

edward — Tue, 24 Oct 2006 17:42:14 +0000

Draggables in accordeon need workaround

Nice example of using the prototype. I just recently started playing with draggables etc. from Scriptaculous (http://wiki.script.aculo.us/scriptaculous/) also based on the same prototype.js and was looking for a way to put all those draggables in an accordeon.

I used your accordeon with great success. I had to alter it because in Firefox once I opened a section it remained open, although I already opened another session. The reason for this is that the heigth of the div that is defined inside the sections always ‘reserves’ that height even if it not visible anymore (upon closure).
In your example that problem is not shown because you use overflow auto.
I can not use it because then my draggables can not leave the accordeon, so I did a little workaround,
namely set the height to 1 px upon closeure and set it to auto upon opening as in the coder here.

openSection: function(section) {
var section = $(section);
if(section.id != this.currentSection) {
this.closeExistingSection();
this.currentSection = section.id;
var contents = document.getElementsByClassName(‘accord_contents’,section);
contents[0].show();
contents[0].style.height=”auto”;
contents[0].style.overflow = “visible”;
}
},
closeExistingSection: function() {
if(this.currentSection) {
var contents = document.getElementsByClassName(‘accord_contents’,this.currentSection);
contents[0].style.height=”1px”;
contents[0].style.overflow = “auto”;
// contents[0].hide(); // no need to hide anymore
}
}

By: Greg

Greg — Sat, 21 Oct 2006 20:00:14 +0000

@Hein – I think it is similar with internet explorer in that the header element click only seems to work when clicking the text part…even though it is a block level element. The simple workaround is to use a div instead….

By: Hein

Hein — Sat, 21 Oct 2006 14:31:09 +0000

Sorry, it works on Safari. (when clicking NEXT TO (left or right) but not ON the text element)

By: Hein

Hein — Sat, 21 Oct 2006 14:23:57 +0000

Hi Greg, it works perfect with Firefox on OSX but it doesn’t work with Safari.

Thanx for all the good articles.

By: Pi

Pi — Sat, 07 Oct 2006 06:10:15 +0000

This is such a well written article. Thanks. Am going to explore this now.

PS- Any chance you could get the scriptaculous cool sliding effects to make the windows slide open so that this is closer to the rico implementation?