Best jQuery Accordion Plugins & Tutorials with Demo

Nested Accordion with jQuery & CSS3

Nested Accordion with jQuery & CSS3

A simple accordion that allows for a nested structure. The style comes with some examples of how to style three levels and how to add a media query for decreasing the size on smaller screens. Clicking a trigger element will open the content.

Clean Tabs: jQuery Responsive Tabs to Accordion

Clean Tabs: jQuery Responsive Tabs to Accordion

Clean tabs is a CSS3 and jQuery responsive navigation tabs, optimized for mobile & touch devices. On small screen, the horizontal tabs turns into a vertical accordion. More than 20 clean, smooth and elegant themes realized to work on every devices. Watch the preview images!

Features:

  • CSS3 & jQuery.
  • More than 20 themes ready to use.
  • 5 pages already designed: Dashboard, Gallery, To-Do, Skills, Team
  • Easy to customize.
  • Clean & modern look.
  • Responsive and easy to use.
  • Works on mobile devices.
  • Cross-browser compatibility.

jQuery Box Accordion Menu – Responsive

jQuery Box Accordion Menu - Responsive

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

  • Clean and Modern Look.
  • Only HTML configuration, no javascript configuration needed.
  • 8 Different colors by default.
  • Make your own colors with CSS.
  • Choose the color of your preference and make you own menu.
  • Responsive design (3 different modes).
  • The responsive design is in a different CSS file and its optional.
  • You can make your own themes and apply it easly.
  • Customizable through css.
  • Simple html mark up.
  • Accordion Effect for submenus.
  • Cross browser compatibility.
  • Twitter Bootstrap compatible.

Zozo Accordion : jQuery Responsive and Touch-Friendly

Zozo Accordion : jQuery Responsive and Touch-Friendly

Zozo Accordion is not just another accordion. It’s responsive and touch-friendly with a lot of customizaton options that can be integrated into your site/blog quickly without writing any code. Some of it’s key features includes: such as horizontal & vertical accordion, Built-in WAI-ARIA Support, 10 unique themes, semantic HTML5 and SEO friendly, Keyboard navigation and much more. Note: This is not a WordPress plugin but it can be easly integrated.

Accarousel : jQuery Accordion with Carousel

Accarousel : jQuery Accordion with Carousel

Before a week one my friend had requested me to suggest any jQuery plug-in that is carousel with accordion effect inside. I tried to find one suitable plugin – but couldn’t make it. That made to write my own custom plugin that consist both carousel and accordion effect. Another one requirement was to flyout the most closed sibling elements to outside and hide rest of all when accordion expands.

jQuery Responsive Tabs & Accordion Plugin

jQuery Responsive Tabs & Accordion Plugin

Tabs + Accordion is a jQuery plugin that simplifies creating responsive tabs and accordions.

Features:

  • You can use the same, simple HTML markup for both Tabs and Accordion.
  • You don’t have to learn how to integrate and use two different products, which saves you time.
  • It is lightweight, because the majority of underlying code for Tabs and Accordion is shared.
  • You don’t have to paint yourself but you can. There is plenty of choice with the included themes.
  • Folks visiting your website with a screenreader can use Tabs + Accordion pleasantly.
  • And folks visiting your website with JavaScript disabled aren’t missing out on content inside Tabs + Accordion.

Sliding Stacked Images With jQuery

Sliding Stacked Images With jQuery

A sliding door effect can be used what the site offer. About a week ago I visited a site called auroraos, on the first page I see a nice sliding image gallery on the front page, it used JQuery to creating the effect, it like a vertical accordion, sliding door effect or whatever you called it.

All the images must have the same size, in both width and height, the hovered images will shows entirely, and the others will mostly hidden.

zAccordion : jQuery Horizontal Accordion plugin

zAccordion : jQuery Horizontal Accordion plugin

zAccordion is a horizontal accordion plugin for jQuery.

jQuery Dashboard Vertical Navigation

jQuery Dashboard Vertical Navigation

Looking to give your next web app or custom cms dashboard that edge? If so then this accordion style jQuery dashboard menu will do just that.Impress your users with the modern dark design whilst giving them the best possible experience.

This script comes with the choice if 6 different colours and is very simple and easy to implement.

Elegant Accordion with jQuery and CSS3

Elegant Accordion with jQuery and CSS3

jQuery Elegant Accordion plugin has following features :

  • Auto-rotate through all the slides with extra options
    • Pause on hover
    • Stop rotation on click of a slide
    • Option to stop rotation at the end of the slides
  • Options for setting delay, animation speed and easing
  • Ability to set active slide onload using hashes (index.html#panel1-3)
  • Works with multiple instances on the page
  • Ability to specify width of active slide while automatically adjusting inactive slides


Best jQuery websites design awards