10 different styles of Accordions (Using Ajax, JavaScript, DHTML)

Post Pic

Hi developers here I am back again with some useful stuff. I had a thought of how to represent lot of stuff in a constant space area in a webpage. Just I thought of how to suppress the things which I want to represent the same in the webpage, then I went through a google search and found some useful stuff, hope you guys also like it, it is something related to Accordion Styles.

We can represent our valuable data in Accordion style in a very awesome manner. I have gone through some of the sites and I thought to share the same to you guys!!!


Accordion is a plugin for RapidWeaver. It builds a dynamic interactive menu-driven interface from your text and graphics. Items open with a smooth slide and close when you choose other content. The content can be just about anything you like: text, graphics, and HTML. Web 2.0: That’s the latest buzzword for creating dynamic sites with interest that interact with the user and don’t require page reloads from the server. To get a Web 2.0 experience you’d usually have to be an expert in Javascript and AJAX or buy expensive tools. But with Accordion you just use the simple, intuitive interface of RapidWeaver to get your content to the web. Everyone else will think you’re a Web 2.0 guru.

Source Website: http://www.yourhead.com/accordion/index.html

Ext Accordion Widget

This page is about the InfoPanel and Accordion javascript classes and its purpose is to allow the potential users to get the feel-and-touch of the user interface they provide. It contains also step by step instructions on how to integrate the Accordion to a web page.

The Ext JS is the javascript library and it is used as a foundation for InfoPanel, Accordion and this example to work.

Source Website: http://aariadne.com/accordion/

Open Rico

Mootools menu with accordion and effects, This simple menu has a neat effect by hovering over the links, and opens a submenu with an accordion.

The mouseover events will make the text upper case and change background image. Submenu items are differentiated by font color and an image appearing on the right. Vice versa, when releasing a button the text will be lower case again.

Of course you can have even more mootools based submenus – just look at the code and play around.

Source Website: http://www.artviper.eu/mootoolsmenu/


Accordion Example with Mootools v1.0, Accordion example with some cool effects:
– Background Color/Type Color and padding-left change based on the current state (Closed/Open);
– Mouseover/Mouseout effects;

Tested in Windows XP SP2 with Firefox 2, IE 6/7, Opera 9.10 and on Mac OS X with Safari 2.0.4

Source Website: http://dev.x-rc.com/accordionExample.html


Here you can see some behaviors which I want to explain in the next pages

Also you can see three types of styles: two from the last Rico release and the third is mine.

This website has got very good examples of accordion styles. There are so many examples which depicts the basic and high level examples of the accordion. Here I have taken only one simple example, you guys can go head and have a look at the site, its very useful.

Source Website: http://dbajax.sourceforge.net/acordeon_example_00.html

Ajax Daddy

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

Source is at ajaxdaddy.com, its an awesome website. All the ajax related stuffs can be viewed there. Ajax at one place.

Source Website: http://www.ajaxdaddy.com/demo-interface-accordion.html

Ajax Asp.Net

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.

Source Website: http://ajax.asp.net/ajaxtoolkit/Accordion/Accordion.aspx

Learning JQuery

A few weeks ago I wrote about two ways we can achieve the "accordion menu" effect, and I promised to describe a third option. Well, this is it, Option 3. But first, here is a list of my other show-hide-toggle entries, as well as Zaefferer’s accordion menu plug-in.

This website is awesome enough to learn all things about JQuery, this website has got more information on how we can use the functionalities of Query.

Source Webite: http://www.learningjquery.com/2007/03/accordion-madness


The space on a page is limited in many ways. Of course we can write lengthy pages and home the user will scroll down to the end of the page to find all the content. Another option is using some show/hide effects.

One these space saving visual effects is the accordion menu that enables a user to open a new region while the others close automatically.

Opening and closing the panels is implemented using smooth size transitions.

Source Website: http://www.mathertel.de/AJAXEngine/S04_VisualEffects/AccordionDemo.aspx

Open Rico

This example illustrates how to use the Rico.Accordion behavior to transform a set of divs into a first class accordion component.

The Rico.Accordion behavior makes use of the Effect.AccordionSize which is an effect that simultaneously grows the height of one element while shrinking the height of another. The Rico.Accordion behavior adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing and hovering.

Source Website: http://demos.openrico.org/demos/accordion

Hope this article helps!! Everybody Rock Up the World with Web.

Related Entries...

You Might Like:


Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

20 Responses


Very cool!


Very cool post!!!


Cool Accordion’s


Does anyone know a accordion demo with a hover accordion instead of a click?


Stan: You can easily modify the javascript to activate upon a mouseOver instead of onClick.


HOw do you do this for a WordPress site? Can someone please help me? I would like to use it but no nothing about javascript and stuff like that.


Hi, I too have developed an accordian which is just 1KB which i have added it on my website…
it will be great if you add up my script too :)


Very nice work Navin Raj, especially when considering the size of it.


Someone please help me. I am trying to use an accordion and am so close except for one small thing I can’t figure out. PLEASE!!!!

  10个javascript和Ajax的Accordion组件 by The Third Part

[...] Snippets收录了10个不同风� �的accordion解决方案,我重点推荐Jozef Sakalos基于Ext [...]

links for 2007-10-06 | xanders blog

[...] 10 different styles of Accordion’s (Using Ajax, JavaScript, DHTML…)at Developer Snippets Rock Up The World (tags: accordion ajax javascript tts) « links for 2007-09-30 [...]



I need to keep the selected accordion pane open while postbacks without using Ajax.
Can anyone help me to figure it out…
Thanks in advance.


[...] 1. Snippet Code for Simple Ajax Tabs with cool CSS Styles 2. Using XMLHttpRequest, reading XML data (Adobe AIR Application) 3. Remove special characters (like !, >, ?, ., # etc.,) from a string using JavaScript 4. 10 different styles of Accordions (Using Ajax, JavaScript, DHTML) [...]

OK… This is the best designs i ever seen… These slides and accodians is also inluded in some of the better Joomla templates and can be easily integrated.


Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.


Nice List of According menu and div’s. using javascript


nice accordions. ty for the post!


Here you have another great list

Exclusive Videos and Review of new Nokia N97 | Camera Review & News

[...] Most Useful Firefox add-ons for Web Development Floating SlideIn Menu with Anchor Link using jQuery 10 different styles of Accordions (Using Ajax, JavaScript, DHTML) We the Team won in Truveo Developer Challenge Contest – TechVideoBytes 60+ Stunning [...]


I’m not that much of a online reader to be honest but your sites really nice, keep it up!
I’ll go ahead and bookmark your site to come back in the
future. Cheers

Leave Your Response