Skip to main content

10 jQuery Great Accordions

By Sam Deering

JavaScript

Share:

😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

You can never underestimate the uses of a jQuery accordion. They can be to use them for menus, slideshows, squeezing content into sidebars, the list is endless! To make life easier, we made a list of ten jQuery accordions that you can use on your site. Enjoy!


1. Xbox 360-like horizontal jQuery Accordion

An Xbox-like horizontal accordion that would look really good being used as a featured content slideshow – an alternative to the JonDesign one that everyone uses.
Xbox-360-like-horizontal-jQuery-Accordion-.jpg
Source


2. HoverAccordion jQuery Plugin

An Apple.com like vertical accordion that opens on hover that would look good on your sidebar.
HoverAccordion-jQuery-Plugin-.jpg
Source


3. Stupid Simple jQuery Accordion Menu

Accordion menus are a very handy tool to show and hide information as needed. Learn how to create one.
Stupid-Simple-jQuery-Accordion-Menu-.jpg
Source


4. State-Saving jQuery Accordion Menu without Reloading the Page

Learn how to create tweaked accordion menu, in which you can bookmark and re-access sections without re-clicking on them.
State-Saving-jQuery-Accordion-Menu-without-Reloading-the-Page-.jpg
Source


5. Accordion Menu Screencast Tutorial

Learn how to build a simple, unobtrusive, accordion style menu using basic events and animations.
Accordion-Menu-Screencast-Tutorial-.jpg
Source


6. Accordion Madness

One of the options how to create accordion menu.
Accordion-Madness-.jpg
Source


7. Slide Out and Drawer Effect

This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin.
Slide-Out-and-Drawer-Effect-.jpg
Source


8. TinyAccordion JavaScript Accordion

This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. It now includes multi-level support, a parameter to determine whether only one panel can be expanded concurrently, and a hide/show all toggle.
TinyAccordion-JavaScript-Accordion-.jpg
Source


9. JavaScript Accordion Menu Wizard

JavaScript Accordion Menu is an image based site navigation menu. ScriptOcean Accordion Menu Wizard supports horizontal and vertical accordion menus.
JavaScript-Accordion-Menu-Wizard-.jpg
Source


10. Extra: Grid Accordion – $8

Grid Accordion combines the functionality of a thumbnail grid and an accordion panel, offering you an interesting method to display your portfolio.
Grid-Accordion-–-8-.jpg
Source

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *


🤓 Ok. When did a code editor from Microsoft become kinda cool!?