Accordion – Plugins, Demos and Tutorials

jQuery plugin: Accordion

jquery accordion 1 Accordion   Plugins, Demos and Tutorials
This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.



Making accordion menu using jquery

jquery accordion 3 Accordion   Plugins, Demos and Tutorials
In this tutorial they’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.


Exactly How to Create a Custom jQuery Accordion

jquery accordion 4 Accordion   Plugins, Demos and Tutorials
Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, they’ll show you how to build a custom accordion that is more “bandwidth efficient”.


jQuery Examples – Horizontal Accordion

jquery accordion 5 Accordion   Plugins, Demos and Tutorials
In this example, They have created an accordion effect that reveals a caption for each thumbnail. They’ve done similar navigations like this in flash, so They wanted to see how it compared to doing it with jQuery.


Accordion Madness

jquery accordion 6 Accordion   Plugins, Demos and Tutorials
Tutorial for Diffrent style of Accordions.



JQuery Accordion Menu

jquery accordion 7 Accordion   Plugins, Demos and Tutorials
This tutorial will take you through the creation of a jQuery accordion menu. There is a little twist to this: the menu contains content. Instead of it being links to multiple pages, it is a choice of what content should appear.


Second Level Navigation Menu

jquery accordion 8 Accordion   Plugins, Demos and Tutorials
Unordered List with anchors and nested lists. Title 2 also demonstrates how to add a second level list. Take a look at the source code to see how easy it’s done!


jQuery – Horizontal Accordion

jquery accordion 9 Accordion   Plugins, Demos and Tutorials
This jQuery plugin allows you to easily transform any unordered list into a horizontal menu.


A Simple and Beautiful jQuery Accordion Tutorial

jquery accordion 10 Accordion   Plugins, Demos and Tutorials
Learn how to create the well-known javascript accordion with the most minimal amount of html, css, javascript code and of course, with a beautiful interface as well.


Super simple javascript accordion jQuery plugin

jquery accordion 11 Accordion   Plugins, Demos and Tutorials
This Jquery plugin makes creating accordions pain free. Just create an ul list and call the accordion javascript method and it is all done! Also it is super lightweight, just around 0.5kb. This Accordion script sets no limit for the depth of your accordion. You can make it as many level as you want.


Impressive Examples of jQuery Accordions







Looking for 70-433 & ccie exams help? Download our cisco ccna and 640-460 demos to pass your real exam in a hassle free way of pass4sure 70-642.

  • Pingback: Enlaces semanales que no he publicado (36) | Cosas sencillas

  • http://graphcacostda.seesaa.net くぅせや

    Hi all, – stumbled upon this blog due to pure luck when roaming around the web this evening, and pleased that I did! I do like the page structure and tones, but I ought to point out that I’m having issues when it loads. I’m using Shiira 1 browser for mac, and the side panel doesn’t align properly. i’m confident applied exactly the same layout on a client’s web site, but the menu seems Ok on mine. I have an idea the problem is at my end & I suppose it’s time to swap!