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
Swati
2010-01-06 21:21:35
dts rly too good....it helped me without wasting too mh time

2
Eugene Kerner
2009-12-23 00:59:20
You dont need the jQueryUI or accordion libs for a simple accordiion (They are quite heavy the UI lib being > 150kb) ... /* accordion.jq: left accordion menu jQuery for ekerner.com Author : 'Eugene Kerner' Date : 23-12-2009 Dependencies: jQuery javascript lib (you do not need the jQueryUI or Accordion libs) : accordion css as per below Example. : an html structure as per the below Example. : a javascript call to accordion.init(accordionId, selectedAccordionItem) as per the below Example. Example : - */ var accordion = { animateSpeed : 'fast', init : function(accordionId, selectedItem) { $('#' + accordionId + ' h3').each(function(){ var item = $(this); item.click(function() { var item = $(this); if (item.next().is(':hidden')) { item.parent().children('div:visible').slideUp(accordion.animateSpeed); item.next().slideDown(accordion.animateSpeed); } }); if (item.html().match('>?' + selectedItem)) item.click(); }); } }

3
Hussain
2009-12-21 23:56:43
Cool example it helped me thanks.

4
Jegan
2009-12-21 05:23:03
Nice Example for Accordion. Thanks for this article

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

6
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

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

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

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

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

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

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

13
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)

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

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

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

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

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

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

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