Skip to content

jQuery plugin that combines the functionality of a grid with that of an accordion.


Notifications You must be signed in to change notification settings


Repository files navigation

npm version License Build Downloads

A responsive and touch-enabled jQuery grid accordion plugin that combines the functionality of a grid with that of an accordion.

The Grid Accordion is also available as a WordPress plugin.

Main features:

  • modular architecture
  • responsive
  • touch-swipe
  • CSS3 transitions
  • animated layers (and static)
  • deep linking
  • lazy loading
  • retina-enabled
  • video support
  • JavaScript breakpoints

Check the plugin's presentation page for examples and more details of the available features.

Getting started

1. Get a copy of the plugin

You can fork or download the plugin from GitHub, or you can install it through npm.

$ npm install grid-accordion

2. Load the required files

Inside the page's head tag include the accordion's CSS file.

<link rel="stylesheet" href="dist/css/grid-accordion.min.css"/>

In the page's footer, just before </body>, include the required JavaScript files.

<script type="text/javascript" src=""></script>
<script src="dist/js/jquery.gridAccordion.min.js"></script>

You can also load the CSS and JS code from

<link rel="stylesheet" href=""/>
<script type="text/javascript" src=""></script>

3. Create the HTML markup

	<div id="my-accordion" class="grid-accordion">
		<div class="ga-panels">
			<div class="ga-panel">
				<img class="ga-background" src="path/to/image1.jpg"/>
			<div class="ga-panel">
				<img class="ga-background" src="path/to/image2.jpg"/>
			<div class="ga-panel">
				<img class="ga-background" src="path/to/image3.jpg"/>
			<div class="ga-panel">
				<img class="ga-background" src="path/to/image4.jpg"/>
			<div class="ga-panel">
				<img class="ga-background" src="path/to/image5.jpg"/>

The structure you see in the code above (grid-accordion > ga-panels > ga-panel) as well as the class names used are required.

More about the supported content (i.e., layers, html, video) in the Modules doc.

4. Instantiate the accordion

<script type="text/javascript">
	jQuery(document).ready(function($) {

Grid Accordion has 40+ customizable options. More about this in the JavaScript API doc.

Detailed usage instructions


If you found a bug or have a feature suggestion, please submit it in the Issues tracker.


The plugin is available under the MIT license.