10 jQuery Accordions Tabs

By Sam Deering

The accordion effect is in many ways similar to tabs – the main difference is the way in which panes are shown and hidden. Here we have collected 10 of the many Tabs and Accordions you would definitely love to find out about. Enjoy!

Related Posts:

Premuim Box Accordion Menu – Responsive

You can play around with all its features to make your own.

1. Yetii – Yet (E)Another JavaScript Tab Interface

With lightweight, object-oriented code that degrades gracefully in browsers without JavaScript-support. You can have many independent tab interfaces on a page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation and more.


Source + Demo

2. Fresh Content Accordion

A simple, yet very eye-catching and colorful accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

Fresh Content Accordion


3. Sweet AJAX Tabs with jQuery 1.4 And CSS3

In this tutorial you will learn how to create a colorful AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery.

Sweet AJAX Tabs


4. TN34 Timetabs – jQuery Plugin

This jQuery plugin by Mario Alves creates tab container that switches automatically every cycle (or interval) to next tab – the plugin is compatible with most modern browsers.

TN34 Timetabs


5. Easy Accordion – jQuery Plugin

The Easy Accordion plugin by Andrea Cima Serniotti will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still.

Easy Accordion


6. jQuery Smooth Tabs Plugin

jQuery Smooth Tabs is an easy to use plugin, which allows you to display your content with some nice effects, for better user experience.

jQuery Smooth Tabs


7. Elegant Accordion – jQuery And CSS3

This easy-to-follow tutorial teaches you how to create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering.

Elegant Accordion


8. Collapser – jQuery Plugin

Is a very light-weight multipurpose collapser plugin made for expanding and collapsing elements, and it can collapse any element within a document.



9. Horizontal Accordion using the Tabs

It’s easy to create horizontal accordions with tabs. Just use the built-in horizontal effect and a little bit of CSS tweaking. You can create wildly different looks and sizes with CSS and you can set the event configuration property to mouseover so that the panes are revealed upon mouseover.

Horizontal Accordion

Source + Demo

10. Multiple Tabs and Accordion instances

Since jQuery Tools 1.1.0 it is possible to instantiate multiple accordion (or tabs) instances with a single call. Here you can see five different Tabs where the last three of them have been nested under the second Tabs instance.

Multiple Tabs and Accordion

Source + Demo

Get the latest in JavaScript, once a week, for free.