A Light Alternative to a jQuery Accordion Plugin

Recently, I have been working on a lot of websites that needed an accordion to display some of the content. My first solution was to use the accordion features of jQuery UI. While jQuery UI and its accordion feature do the expected of it and are very easy to use, they have one major downfall: speed. The more accordion sections you have, the longer it takes to render. On one site, it was up to 6 seconds just to get the accordions set up. 6 seconds may not sound like a lot, but it is long enough to start losing visitors when it comes to load time. Because of this, I ended up developing my own jQuery Accordion plugin. Here’s how to use it:

Dependencies

First of all, jQuery needs to loaded on your page. I generally load it from Google, but you can also download jQuery and host it on your own server if you so choose. After jQuery is loaded on the page, you can then add the jquery.accordion.js file included in the download. You must also include the jquery.accordion.css file in order for the accordion to show and hide the correct sections.

Once everything is loaded, you need to set up the markup on your page to be compatible with accordions.

Markup

  • First, you need a container with a class of “accordion-container” to contain all the sections of the particular accordion.
  • Within the ”accordion-container”, you need to create a container with a class of “accordion” for each individual accordion section. To this, you also need to add either an “expanded” or “collapsed” class, depending on whether you want the accordion to default to expanded or collapsed.
  • Next, within each accordion, there is an “accordion-header” section and an “accordion-content” section. The accordion header section is the part of the accordion that is always visible, and is generally the element you click to switch to a different setion. The accordion-content section has all the content that is revealed when a particular accordion is activated.
  • Finally, you need to enable switching between accordion sections.  To enable switching between sections, you need to add ‘data-action=”accordion” ’ to the element you want to trigger the accordion. In most cases, I add this to the same div that has the class=”accordion-header”. This makes the entire header the trigger.

Example Markup

<div class=”accordion-container”>
	<div class=”accordion expanded”>
		<div class=”accordion-header”>Section 1</div>
		<div class=”accordion-content”>
			Content of this accordion goes here.
		</div>
	</div>
	<div class=”accordion collapsed”>
		<div class=”accordion-header”>Section 1</div>
		<div class=”accordion-content”>
			Content of this accordion goes here.
		</div>
	</div>
</div>

Advanced Usage

The example provided above is the most common way accordions are used, but there are other possibilities as well. In some instances,

There are other possibilities for how to trigger the different accordion sections. There is an example folder included in the download that has examples of a few different possibilities for how to use the accordion.

Resources

 An online demo showing how this works is available:

here