35+ jQuery Accordion Menu and Slider Plugins

Tuesday 23rd, December 2014 / 02:18 Written by
35+ jQuery Accordion Menu and Slider Plugins
674 Flares Twitter 25 Facebook 4 Google+ 7 LinkedIn 0 StumbleUpon 638 Filament.io 674 Flares ×

Space is always limited on busy front pages of websites. By using a jQuery accordion menu or a slider plugin on your pages, you will be able to present lots of content in a small space and it is perfect for featuring important content. This helps you in creating a website where it is easy for visitors to navigate. In addition, you should consider using simple website templates, as they tend to be less crowded and give more space for your content. I collected some of the best themes in a previous post and recommend that you check it out.

As most visitors land on the homepage or end up navigating to it, most website owners want as much important content made available as possible in this page. Services, products and other important elements will often fight each other for the best spot on this page leaving not to little room for keeping the design simple or even minimalistic. Most commonly used solution right now is jQuery sliders but accordion menu plugins also does a great job, as you will see in the demos below.

A great way to combine the need for a minimalistic web design with the fact that you want, as much content featured on the same page as possible, is to use a jQuery accordion menu or as just mentioned a content slider. As the accordion menu is expandable, it becomes possible to show lots of information without using lots of space. On the other hand if using slider plugins you will be able to create a dynamic presentation where the content changes automatically and often with fancy animation effects. Either way these two methods will help, you create an easy to navigate website that will fulfill all your visitor’s needs.

Premium jQuery Accordion Plugins

jQuery Dashboard Vertical Navigation – MORE INFO / DEMO

jquery-dashboard-vertical-navigation

This is a cool accordion style jQuery dashboard menu script.This script comes with the choice if 6 different colours and is very simple and easy to implement.

Zozo Accordion – Responsive and Touch Friendly – MORE INFO / DEMO

zozo-accordion-responsive-and-touch-friendly

This is the brand-new version (v3.3) of Zozo Accordion. It is a Fully responsive and touch-friendly with a lot of customization options that can be integrated into your site/blog quickly without writing any code. Some of its key features includes: such as CSS3 transitions with jQuery fallback, horizontal & vertical accordion, Load content with AJAX, custom styled scrollbar for Webkit, 10 unique themes, semantic HTML5 and SEO friendly and much more. Note: This is not a WordPress plugin but it can be easily integrated.

jQuery Searchable 3 Level Accordion – MORE INFO / DEMO

jquery-searchable-3-level-accordion

A clean searchable accordion that offers a lot of features it has up to 3 leves of nesting , fully W3C compliant (XHTML 1.0 strict!), configurable animation, active, inactive, external nodes supported and with 5 skins included!

Accordion Multi Menu – MORE INFO / DEMO

accordion-multi-menu

This is a simple yet modern and easy to install jQuery and CSS3 vertical accordion menu.

Grid Accordion – MORE INFO / DEMO

grid-accordion-

Grid Accordion combines the functionality of a thumbnail grid and an accordion panel, offering you an interesting method to display your portfolio. You have the option to use either XML or HTML. The powerful API will allow to further enhance the functionality of this jQuery plugin and make it possible to easily integrate it into your own application.

Clean Tabs: Responsive Tabs To Accordion – MORE INFO / DEMO

clean-tabs-responsive-tabs-to-accordion

A simple and responsive way to keep your content anywhere.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.

Accordion A – MORE INFO / DEMO

accordion-a

Accordion A is a lightweight, accessible jQuery accordion plugin. It has smooth and beautiful CSS3 transitions that brings Accordion A to life.

Dynamic Accordion Banner Rotator – MORE INFO / DEMO

dynamic-accordion-banner-rotator

This accordion menu was made in a way it could be easy adapted to any kind of project for you, you can have and do pretty much what you want with the rotator. Some of the options include click or over images action, the possibility of having any kind of button to the next and previous image or none at all, autoplay and duration, border or shadow divider and much more.

Modern Accordion – MORE INFO / DEMO

modern-accordion

Modern Accordion is simple JavaScript driven accordion widget, which can be used to divide content of your site into sections. Modern Accordion is written on top of jQuery JavaScript framework. Its main features are simple navigation UI, smooth animations, easy to integrate within the sidebar or body of existing websites and it works in IE 6 , 7 and 8, Firefox, Safari, Opera and Chrome.

Superslide Accordion Menu – MORE INFO

superslide-accordion-menu

SuperSlide Accordion Menu v.1 is very small pure Javascript/CSS/HTML web component, which allow you to easily create a beautiful accordion menu (sliding menu) with using images, text, video, audio etc. in content area of slide. Script automatically adjust accordion to the number of elements in the accordion and the dimensions of the accordion and you are able to use different images for active and inactive tab (slide) and customize look and feel by CSS .

Sherpa Complete Navigation System – MORE INFO / DEMO

sherpa-complete-navigation-system

Sherpa is a total solution for all your navigation requirements. Sherpa brings together the three main navigation elements of every interface – Navbar, Sidebar and Sticky Footer. Each one consists of a selection of different menu types including: Slide Menu, Mega Menu,Accordion Menu and Drop Menu. You can pick, choose and mix these to make a really unique navigation.

Vertu – Accordion Menu – MORE INFO / DEMO

vertu-accordion-menu

Vertu  Accordion Menu simple and beautiful accordion menu for you website. It offers tons of features like easy to change structure via CSS, cross Browser Support, clean Code, simple menu construction, 6 ready color schemes, very easy to understand documentation, include HTML5/CSS3 and JavaScript file and it is easily Customizable. It also compatible with major browsers Google Chrome, Mozilla Firefox, Opera, Safari  and Internet Explorer.

Classic Accordion – MORE INFO / DEMO

classic-accordion

Classic Accordion is a jQuery plugin that allows you to easily create accordion panels. You have the option to use XML, which will make the accordion panel much easier to setup and maintain. However, you also have the option to use HTML instead of XML. The plugin also provides an easy to use API which will allow to further enhance the functionality of the accordion and make it possible to integrate it into your own application.

Lida – Accordion Menu – MORE INFO / DEMO

lida-accordion-menu

Lida accordion menu is based in pure CSS3. It has CSS3 Transition Effects (for Modern browser) and JQuery fallback for IE browsers. It offers a lot of features, has approximately 8 styles, icon support (240+), well documented and very easy to use.

J – Accordion – MORE INFO / DEMO

j-accordion

J-Accordion is a accordion component with distinctive style, based in CSS e JavaScript code. J-Accordion has a lot of features like the following: 12 preset styles, 12 visual special effects (Fade effect, blind effect, drop effect, highlight effect and more) , hover effect. icon support (no images required), very easy to understand documentation and it is also compatible with the major browsers.

jQuery Plugin: Drop List – MORE INFO / DEMO

jquery-plugin-droplist

This is a jQuery plug-in, which helps to make beautiful sliding drop lists – available in 6 color schemes. It has a lot of features to offer like cross browser compatible, help documentation included and very easy to use and install. It also works with jQuery Library.

Mate Tabs Jquery Plugin – MORE INFO / DEMO

mate-tabs-jquery-plugin

Mate Tabs it is a responsive retina ready tabs and accordion. Mate tabs is very simple to use, customizable and allows multiple connections.

Z Light Accordion jQuery Plugin – MORE INFO / DEMO

z-light-accordion-jquery-plugin

Z Light Accordion – is a adaptive jquery accordion. Fully customizable.Supports thirty animation effects from jQuery Easing.You can embed your icons, you can adjust the speed of the animation, you can change the color, size and much more.

Free jQuery Accordion Plugins

 

Flexible Slide to Top Accordion – MORE INFO / DEMO

simple-jquery-accordion

This 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. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.

Accordionza – MORE INFO / DEMO

accordionza

Accordionza is very flexible jQuery plugin. While providing a solid accordion base code, it leaves you the freedom to design an accordion the way you want.

zAccordion – MORE INFO

zaccordion

zAccordion is a horizontal accordion plugin for jQuery. With its latest version Version 2.1.0.

liteAccordion – MORE INFO

lite-accordion

liteAccordion a horizontal accordion plugin for jquery. It is called lite accordion because the minified JS source only weighs 6kb. It originally had two themes ‘basic and dark’ . In version 2 two more themes were added the ‘light and stitch’. It’s been tested on the latest versions of Firefox, Chrome, Safari and Opera. liteAccordion is free to use for commercial and personal projects.

Colorful Content Accordion CSS jQuery – MORE INFO / DEMO

colorful-content-accordion-with-css-jquery

This is a tutorial about making a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

Accordion – MORE INFO / DEMO

accordion

This accordion Displays collapsible content panels for presenting information in a limited amount of space.

Elegant Accordion With jQuery And CSS3 – MORE INFO / DEMO

elegant-accordion-with-jquery-and-css3

This is a tutorial that will help you 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.

JavaScript Accordion Menu Wizard – MORE INFO / DEMO

javascript-accordion-menu-wizard

JavaScript Accordion Menu is an image based site navigation menu. Scriptocean Accordion Menu Wizard supports horizontal and vertical accordion menus. It has features like title and description text for each image, define a link for each image, you can set transparency of the text area and auto play.

Making Accordion Menu Using jQuery – MORE INFO / DEMO

making-accordion-menu-using-jquery

This tutorial will show you how can you create fancy accordion menu using jQuery.There will be two accordion examples in this post. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toggled when mouse is moved over it.

iksmenu – jQuery Accordion Menu – MORE INFO / DEMO

iksmenu-jquery-accordion-menu

This tutorial will show you how to create an accordion jquery menu.

Exactly How to Create A Custom jQuery Accordion – MORE INFO / DEMO

exactly-how-to-create-a-custom-jquery-accordion

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. This tutorial will show you how to build a custom accordion that is more “bandwidth efficient”.

jQuery Plugin: Easy Accordion Plugin – MORE INFO / DEMO

jquery-plugin-easy-accordion-plugin

jQuery Plugin: Easy Accordion Plugin is a highly flexible horizontal slider accordion able to show any kind of content (text, images, lists, etc.).

Unleash jQuery Accordion Slider – MORE INFO / DEMO

unleash-jquery-accordion-slider

Unleash is a responsive, fancy and easily customizable jquery accordion image slider. It offers a lot of features like multiple pre-styled Captions, multiple captions animations, ability to add multiple sliders in one page without interfering, expand by hover or click event and it is easy to set up with Detailed documentation.

Stylish jQuery Accordion Plugin (FREE): Akordeon – MORE INFO

stylish-jquery-accordion-plugin

County is a free jQuery count down plugin build with powerful jQuery library and loaded with various customization options. It allows you to control the animation, color schemes and many other parameters.

jQuery Simple Vertical Accordion Menu – MORE INFO / DEMO

jquery-simple-vertical-accordion-menu

This tutorial is a perfect example of how easy it is to add a slick vertical accordion style menu to your website with just a few lines of jQuery code!

674 Flares Twitter 25 Facebook 4 Google+ 7 LinkedIn 0 StumbleUpon 638 Filament.io 674 Flares ×

About the author

Hi I am Pete! I love to work with web design and sometimes dive into some coding. My main focus is WordPress websites.

View all articles by Pete

1 Comments on “35+ jQuery Accordion Menu and Slider Plugins

  • It is important that as a designer to determine the specific type of slider you are looking for. You can easily get caught getting a slider that is non-responsive. Even more so, you might have to do some modification of the sliders css media queries in order to get the right dimensions by resolution.

Comments are closed.