Top 20+ 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!

Tutorial Demo

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.

Tutorial Demo

Making accordion menu using jquery

by Roshan
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.

Tutorial Demo

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.

Tutorial Demo

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.

Tutorial Demo

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 Demo

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.

Tutorial Demo

Horizontal JavaScript Accordion 1kb

by Scriptiny
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.

Tutorial Demo

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 Demo

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.

Tutorial Demo

jQuery Examples – Horizontal Accordion

by Design Reviver
In this example, I have created an accordion effect that reveals a caption for each thumbnail.

Tutorial Demo

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.

Tutorial Demo

Create Accordions with CSS3, HTML5 and jQuery

by CSS-Plus
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.

Tutorial Demo

Javascript And CSS Tutorial – Accordion Menus

by SwithOnTheCode
A number of javascript libraries provide nice and simple accordion menus, but today we are going to take a look at how to build our own.

Tutorial Demo

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.

Tutorial Demo

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.

Tutorial Demo

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.

Tutorial Demo

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.

Tutorial Demo

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.

Tutorial Demo

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.

Tutorial Demo

WordPress Accordion banner rotator / slideshow

by gljivec
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.

Purchase Demo

CSS3 Accordions For WordPress

by QuanticaLabs
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).

Purchase Demo

Styles with Shortcodes for WordPress

by RightHere
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!

Purchase Demo

Sugar Slider – Premium WordPress Slider Manager

by mordauk
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.

Purchase Demo

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Want to be emailed when new comments are added?