jQuery AccordionsAccordions are a great addition to any website. They allow you to display lots of content in limited space. As well, users know how to use them granted they are designed properly. Many times, to implement an accordion one would use a popular library like jQuery UI or one of the many other plugins available. The issue with this is they are often heavy and bloated.

A Lightweight Plugin-less jQuery Accordion

Are you fed up with using heavy plugins for jQuery accordions? I sure am, and for that reason I did some research. I came across Chris Coyier’s post Simple jQuery Accordion and this was close to what I was looking for except it lacked a few enhancements:

  • Adding a class to the active panel (Chris’ second demo kinda does this)
  • Open first panel by default (most designs have this)
  • Support for multiple accordions on one page
  • Improved basic design starting base
  • Vanilla CSS rather than SCSS – no fancypants here
  • No anchor tags for toggles but rather heading tags (for SEO reasons)
  • Code comments for more clarity for easier forking (minified version available below)

Live Demo: Simple Accordion with Enhancements

I forked the Simple jsFiddle Accordion Chris provided in his article and tacked on a bit more functionality. The end result is seen below and contains the functionality enhancements mentioned above:

As you can see in the demo we have toggle classes enabled to display a unicode arrow using CSS before the accordion title. This can easily be modified to use an image sprite or icon font. As well, there are two accordions on the page in this demo. There’s no reason you should be limited to one accordion per page. Many sites want to utilize multiple accordions within their UI.

The accordions in this demo have the first panel open by default in this demo. This demo is styled a bit nicer and is similar to the most excellent Twitter Bootstrap Collapse Accordion. Finally, the accordion uses plain Jane CSS for the 99% out there and doesn’t allow for toggled panels to be clicked.

Now it’s time for you to implement this on your own website. The following will describe the steps needed to reproduce the accordion on your site.


Implementing the Accordion on Your Website

To implement the accordion on your website you will need to grab three pieces from the jsFiddle above:

Accordion CSS

Click on the CSS tab in the jsFiddle above or copy the CSS below:

Once you add the CSS to your site’s stylesheet it’s time to implement the HTML.

Lightweight Accordion HTML

Add the following HTML to the DOM on the page you wish to display the accordion:

Now that the HTML is in place it’s time to get the last piece in place.

Add Accordion JavaScript for Functionality

Without the JavaScript we won’t have any functionality. Add this snippet of code to your sites main JavaScript file:

Non-minified – Still light-weight, and you know what’s going on.

Minified Version – Packed tight.

The total file size of the JavaScript is under 500 bytes minified; that’s less that half a kilobyte. This is super compact compared to most accordions plugins you will see.

Wrapping it Up

The goal of this article is to provide a flexible accordion for use on the web using jQuery without a plugin. If you found this article useful please comment below!

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin:

7 Responses to “Super Lightweight jQuery Accordions For Your Website Without a Plugin”

  1. Stephen Kane

    Hey Devin

    Nice tut. So I’m probably being a knucklehead, because it does’t toggle for me.

    http://mcamu.staging.wpengine.com/corp-radiance/test-accordion/

    Anything obvious?

    Reply
    • Devin Walker

      I think the version of jQuery you are using is outdated. When I view console I see the “jquery is not defined” error which leads me to believe this is the cause. You are using jQuery v1.10 on your site.

      Reply
  2. Laura Upcott

    Hi Devin,

    Thanks so much for sharing this tip! It works perfectly and you made it very easy to implement.

    Reply
  3. Frédéric Lebunetel

    Thanks for this.
    But i search how to close one panel when it’s the only active panel, can you help me ?

    Reply
  4. Sam

    Great follow up from Chris’s tutorial. Which touch devices have you tested this on? Works well on the iPhone 5.

    Reply
  5. Carlos Arellano

    Hi Devin, i’m very thankful of the Tutorial, it is very nice, i got a question, how can i get closed the first panel on load by default? thank you very much again.

    Reply
  6. Andrew Barr

    Howdy,

    I needed the ability to collapse a form in my sidebar and this is how I modified the JS to accomplish it, keeping the CSS + HTML the same:

    http://pastebin.com/qW3GganY

    I had to use “document ready” to get it to work in my theme’s custom JS panel. That, and I’m a total n00b 😉

    Hope this helps the people that asked!

    Reply

Leave a Reply