Top 20+ jQuery Accordion Tutorials27th Nov 2011 | Posted by Eko S. | 2 Comments
When you want to present various section of data in a small amount of space, with keep pleasant to readers eyes and not overloaded with extra information then Accordin can be a incredibly useful. And jQuery is ideal for creating such accordions with the minimal amount of code, clean html and good looking images.
In this list article, we’ve collected 10 simple jQuery accordion tutorials that will help you to build your own.
Best jQuery Accordion Tutorials
Grid Accordion with jQuery
by Chris Coyier
I was recently building a page for a client site, where the information that they provided really made sense to present as a table. But it was too much information to view all at once. I thought it would have been overwhelming visually. I also thought that it was most likely that people visiting this page would know what they needed right away, so having them click once to get it seemed pretty reasonable. So, a table of accordions!
State-Saving jQuery Accordion Menu Without Reloading the Page
by Michael Jacob Davis
When I set out to create this site, I wanted something that: used the entire page, scaled well, looked nice, degraded gracefully and was SEO friendly. What I found was jQuery’s accordion menu.
Making accordion menu using jquery
In this post I’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.
Stupid Simple jQuery Accordion Menu
by Ryan Stemkoski
I have found many of the existing accordion menu systems to be bloated and difficult to understand. I knew there had to be an easier way to create an accordion menu.
Vertical Sliding Accordion with jQuery
by Mary Lou
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information.
Exactly How to Create a Custom jQuery Accordion
by Trevor Davis
So the plan for this tutorial is to show create an accordion using the jQuery UI function, then create one using some custom coding. Let’s use a blog sidebar as an example.
Tutorial: Create A jQuery Accordion Image Slider For Your Website
by AJ Clarke
Following are the steps for adding the accordion slider to your website or WordPress theme.
This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.
A Simple and Beautiful jQuery Accordion Tutorial
by Kevin Liew
I was about running of ideas in tutorials, picking my own brain, and finally, I’ve almost forgotten the awesomeness of accordion. Yes, we will be creating a Accordion!
Tutorial: A Horizontal jQuery Accordion using Custom Event Binding
by Joel Sutherland
This post will take the same approach, but instead look at the custom jQuery horizontal accordion that is on the homepage. Unlike the last project, this one will be build without the help of any plugins. It was created entirely from scratch using jQuery custom events.
jQuery Examples – Horizontal Accordion
by Design Reviver
In this example, I have created an accordion effect that reveals a caption for each thumbnail.
Simple Accordion w/ CSS and jQuery
by Soh Tanaka
Since a lot of people found my toggle tutorial useful, I would like to go over how I approached building an accordion from scratch.
Create Accordions with CSS3, HTML5 and jQuery
First thing is first, let me clarify what I mean by Create an Accordion with CSS3, HTML5 and jQuery. I am talking about creating 3 different accordions, one which relies heavily on CSS3, one with jQuery and one with HTML5.
Create Simplest Accordion Menu using jQuery
by Viral Patel
Let us create a simple Accordion Menu using jQuery. Accordion Menu are the menu with some animation effect.
Flexible Slide-to-top Accordion
by Mary Lou
In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place.
Making a Fresh Content Accordion
by Martin Angelov
Today we are making a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.
Slide out and drawer effect
by John Resig
In this tutorial will demonstrated how easy is create this simple slide aka drawer aka accordion effect during @media Ajax 2007 – it also makes for a great introduction to jQuery.
Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
by Brian Crescimanno
We’ve all seen the “accordion” type effect used on many Web 2.0 sites; however, many accordion scripts are heavy, make poor use of the libraries they are based on, and don’t handle things like ensuring that the accordion maintains a consistent height.
Elegant Accordion with jQuery and CSS3
by Mary Lou
Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks.
Beautiful Accordion WordPress Plugins
WordPress Accordion banner rotator / slideshow
Beautiful WordPress Accordion Slideshow will showcase your products or services in an impressive manner. A lot of cool features will help you adjust the slideshow to your web page.
The plugin comes with a custom admin panel where you can manage and customize all of your slideshows. To use it, you only have to put ashortcode in your page. A simple and functional drag and drop feature to help you change order of images implemented.
CSS3 Accordions For WordPress
This is a pack of pure CSS3 Accordions For WordPress – horizontal and vertical. Tested and working in all browsers. IE 6 – 8 is supported by JS (jQuery Fallback).
Styles with Shortcodes for WordPress
This plugin lets you customize content faster and easier than ever before by using Shortcodes. Choose from 100 built in Shortcodes like; jQuery Accordion, Tabs and Toogle, Tooltips, Column Shortcodes, Gallery and Image Shortcodes, Button Styles, Alert Box Styles, Pullquotes, Blockquotes, Twitter buttons, Retweet button, Facebook Like, Follow me on Twitter buttons, Linkedin, Google +1, Flattr and many more!
Sugar Slider – Premium WordPress Slider Manager
Sugar Slider makes it as easy as it could possibly be to create gorgeous sliders for your WordPress powered site. Forget nasty custom fields and image URLs. You can even forget about manually resizing every image before you upload it.