Accordion

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

Accordion demo

Changes to the code below will update the demo above in real time.



Aug. 26, 2007, 9:24 a.m. - vs007vs

It's very good.Effective and quickly.Thanks.

Oct. 5, 2007, 7:45 a.m. - aaaachoooo

this accordion flashes the entire content div as it moves, but only in IE.

Oct. 18, 2007, 12:24 p.m. - videobored

Does anyone know of another solution that also works well in IE? I need this functionality, but it has to be cross-browser friendly.

Oct. 30, 2007, 6 a.m. - Chris

It works fine in IE7

Jan. 23, 2008, 8:14 a.m. - Frank

Best for accordions is still mootools, as it has cross-browser functionality and works like a charm.

May 5, 2008, 10:57 p.m. - Movie Reviews

Thank you, it is very useful

July 18, 2008, 1:09 p.m. - jacks

thank you very much, i search a lt

July 20, 2008, 9:44 p.m. - baku

jquery.js, interface.js where is this file pls tell me by e_baku4u@yahoo.com

Aug. 11, 2008, 10:10 a.m. - MyTivu - Free Video Site

Great addtiong to a free video site.

Sept. 2, 2008, 11:29 p.m. - Rahul

cool example. thanks.. it took me some time to customize... but it was all worth it. cheers

Sept. 30, 2008, 7:25 a.m. - dolf

How can you adjust the panel width ?

Nov. 30, 2008, 4:10 a.m. - Ms.no

how to change the scrolling look? i want it looks like only 2 arrows                 up and down

April 3, 2009, 4:07 a.m. - Hiren Modi

Very nice tuts thanks.

April 11, 2009, 12:28 a.m. - suresh

realy good and nice

April 18, 2009, 2:37 p.m. - ambrosia

This is so really good

July 22, 2009, 12:22 p.m. - nishant

good, but not very clear... need instructions

Aug. 13, 2009, 6:45 a.m. - P Kannan

how to download interface-fisheye.css

Sept. 4, 2009, 8:53 p.m. - Nishikant Karmali

Great example but where to make window width changes and tab color. Thanks -nishi(nishikantk[at]hotmail.com

Sept. 16, 2009, 2:47 p.m. - Kaiser

Demo sample

Oct. 31, 2009, 1:04 p.m. - Yash

I have added this Accordion to my page but it not working with otherjavascript, why

Nov. 5, 2009, 3:44 a.m. - anit prasad singh

good effect of image

Nov. 19, 2009, 3:07 a.m. - khuku

dasfdxtha hfdjvgidfj gdsfhs

Nov. 20, 2009, 12:01 a.m. - Dreger

One of you asked how to change the width. I changed the widthlike this: In FF: #myAccordion {min-width:80%;} And in IE #myAccordion {width:80%;}

Dec. 21, 2009, 5:23 a.m. - Jegan

Nice Example for Accordion. Thanks for this article

Dec. 21, 2009, 11:56 p.m. - hussain

Cool example it helped me thanks.

Dec. 23, 2009, 12:59 a.m. - Eugene Kerner

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' <ekerner@ekerner.com> 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 : - <style type="text/css"> .accordion h3 {cursor: pointer;} .accordion div {display: none; } </style> <div id="menuAccordion" class="accordion alignLeft"> <h3>Item 1</h3> <div> Item 1 content </div> <h3>Item 2</h3> <div> Item 2 content </div> </div> <script type="text/javascript">$(document).ready(function(){accordion.init('menuAccordion', 'Item 2')});</script> */ 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(); }); } }

Dec. 26, 2009, 8:15 a.m. - ooty

its nice to test online

Jan. 6, 2010, 9:21 p.m. - swati

dts rly too good....it helped me without wasting too mh time

Jan. 26, 2010, 1:21 a.m. - Caner Erdoğan

ist great, thanks

Feb. 17, 2010, 6:57 a.m. - pompa

good script. thanks

March 4, 2010, 12:23 a.m. - ajay rathod

good example.

March 8, 2010, 6:55 p.m. - Alan Mark Levinson

A faster and more enjoyable way to get familiar with this jQuery UI object than jqueryui.com itself. Gracias!

March 19, 2010, 2:52 a.m. - Umer

It looks Cool but i'll try it later. Can anybody tell me how to Design Captcha..???

April 3, 2010, 10:33 a.m. - Taufiq Rismadany

turnuwun dab!

April 4, 2010, 12:46 a.m. - Ayyappan

Where is get jss and css files of above used html.

April 15, 2010, 11:54 p.m. - Imran

Its really a good approach for beginners....

April 20, 2010, 8:24 a.m. - hans

ty works great :)

April 29, 2010, 7:06 a.m. - Deivis

Can the accordion pane remember the opcion selected when I refresh my page

April 29, 2010, 7:07 a.m. - Deivis

Can the accordion pane remember the option selected when I refresh my page?

May 28, 2010, 10:41 p.m. - karthick

Wow nice! Thanks for the example and the codings

June 4, 2010, 3:35 a.m. - ken

Is this codes running in ASP.net?

June 16, 2010, 1:38 a.m. - Akis

It doesn't work in IE7 if you have specified the DOCTYPE as being XHTML Transitional. But even if you change it to HTML 4.01 the movement is still erratic.

June 16, 2010, 1:47 a.m. - Akis

** Update to my previous comment ** It works ok in IE7 and IE8 - I forgot to put a set width on the main DIV :-)

July 30, 2010, 9:44 a.m. - h

very nice , thank you !

Aug. 19, 2010, 7:58 p.m. - Dietke

thanks Joseph for getting that together!!!!

Oct. 9, 2010, 4:45 a.m. - Anand

Nice to have such code,... really thnk u

Dec. 2, 2010, 7:41 a.m. - jayavardhanp

Hi,How can i get the Horizontal Accordion

May 10, 2011, 10:29 a.m. - Warren

How do I put links on pages of accordion? <base href> makes <a href> go to ajax. Help!

May 26, 2011, 6:56 a.m. - Reena Kumari

this demo having four dt class.when we are going to click last dt class ,that should be visible at the top of the page with content .

Sept. 7, 2011, 5:37 a.m. - hussain

hi yes its cool but its simple java script effect and i am looking for a pure AJAX mean while clicking the menu generate an Ajax request and get the menu content as response.

Dec. 15, 2011, 4:45 a.m. - TajinderSingh Khandpure

Hi guys.. thnx for the code.. But, when i am applying this code to my existing jsp..its images are getting dissappeared..plz help.. Following particular code of accordion is giving me trouble: <base href="http://www.ajaxdaddy.com/media/demos/play/1/accordion/interface-accordion/" /> <meta http-equiv="Content-Language" content="en" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="javascript/jquery.js"></script> <script type="text/javascript" src="javascript/interface.js"></script> <link type="text/css" href="css/interface-accordion.css" rel="stylesheet">

Oct. 21, 2012, 3:01 p.m. - Sean DeYoung

Awesome example. Thanks!!!