Accordion

Read more and download "Accordion"

The demo presents the effect of an accordion. It's fun and easy to implement using AJAX.




Web 2.0 Box Generator


Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.
Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Name
Url
Comment
Captcha
 

 

1
Shasi
2009-02-26 06:26:29
I wish the javascript files were documented better. After a lot of analysis, I hope this explanation will help others trying to implement this accordion control. All of the Javascript files are hosted on ajaxdaddy.com, and not at stats.byspirit.ro. I don't know why AjaxDaddy would add a refence to a Romanian website, unless they trying to hide an essential .js file. To get the necessary css and javascript files, just go to the following URLs: http://www.ajaxdaddy.com/web20/jquery/interface-accordion/javascript/jquery.js http://www.ajaxdaddy.com/web20/jquery/interface-accordion/javascript/interface.js http://www.ajaxdaddy.com/web20/jquery/interface-accordion/javascript/jquery.js http://www.ajaxdaddy.com/web20/jquery/interface-accordion/css/interface-accordion.css http://www.ajaxdaddy.com/js/track.js If you are using Visual Studio, like I am, just add a new item and select Javascript or CSS file type, rename the new file appropriately, and paste the code from the above references into each file. I recommend adding the new javascript to your App_Data folder. Then replace the following base reference in the above code with second base reference below: Replace: WITH: I hope this helps someone out there. It would have really helped me if someone could have documented it before I did.

2
Ms.no
2008-11-30 04:10:10
how to change the scrolling look? i want it looks like only 2 arrows                 up and down

3
Dolf
2008-09-30 07:25:23
How can you adjust the panel width ?

4
Rahul
2008-09-02 23:29:09
cool example. thanks.. it took me some time to customize... but it was all worth it. cheers

5
Joseph
2008-08-31 06:15:24
I almost forgot to mention to replace that silly Romanian URL Reference ( src="http://stats.byspirit.ro/track.js") With src="../App_Data/track.js" And I don't know what image the second Romanian URL is referencing, but I deleted entirely from my project and it is working fine.

6
Joseph
2008-08-31 06:11:44
Not all of URL's in the second part of my comments were posted, so I'll add that part again: Replace: base href="http://www.ajaxdaddy.com/web20/jquery/interface-accordion/" WITH: base href="..App_Data/" I hope this helps someone out there. It would have really helped me if someone could have documented it before I did.

7
Joseph
2008-08-31 06:07:49
I wish the javascript files were documented better. After a lot of analysis, I hope this explanation will help others trying to implement this accordion control. All of the Javascript files are hosted on ajaxdaddy.com, and not at stats.byspirit.ro. I don't know why AjaxDaddy would add a refence to a Romanian website, unless they trying to hide an essential .js file. To get the necessary css and javascript files, just go to the following URLs: http://www.ajaxdaddy.com/web20/jquery/interface-accordion/javascript/jquery.js http://www.ajaxdaddy.com/web20/jquery/interface-accordion/javascript/interface.js http://www.ajaxdaddy.com/web20/jquery/interface-accordion/javascript/jquery.js http://www.ajaxdaddy.com/web20/jquery/interface-accordion/css/interface-accordion.css http://www.ajaxdaddy.com/js/track.js If you are using Visual Studio, like I am, just add a new item and select Javascript or CSS file type, rename the new file appropriately, and paste the code from the above references into each file. I recommend adding the new javascript to your App_Data folder. Then replace the following base reference in the above code with second base reference below: Replace: WITH: I hope this helps someone out there. It would have really helped me if someone could have documented it before I did.

8
MyTivu - Free Video Site
2008-08-11 10:10:18
Great addtiong to a free video site.

9
Brian
2008-05-26 22:10:27
What are these references to the URL http://stats.byspirit.ro? This doesn't seem safe or secure to be referencing another site or URL. (BTW... this site's captcha sux - it's impossible to read)

10
Movie Reviews
2008-05-05 22:57:29
Thank you, it is very useful

11
Frank
2008-01-23 08:14:38
Best for accordions is still mootools, as it has cross-browser functionality and works like a charm.

12
Chris
2007-10-30 06:00:12
It works fine in IE7

13
Videobored
2007-10-18 12:24:53
Does anyone know of another solution that also works well in IE? I need this functionality, but it has to be cross-browser friendly.

14
Aaaachoooo
2007-10-05 07:45:38
this accordion flashes the entire content div as it moves, but only in IE.

15
Vs007vs
2007-08-26 09:24:33
It's very good.Effective and quickly.Thanks.

16
Meysam
2007-07-06 09:12:39
is best