Grid Accordion - jQuery plugin
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="https://code.jquery.com/jquery-3.6.2.min.js"></script>
<script src="dist/js/jquery.gridAccordion.min.js"></script>You can also load the CSS and JS code from unpkg.com:
<link rel="stylesheet" href="https://unpkg.com/grid-accordion/dist/css/grid-accordion.min.css"/>
<script type="text/javascript" src="https://unpkg.com/grid-accordion/dist/js/jquery.gridAccordion.min.js"></script>3. Create the HTML markup
<body>
<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>
<div class="ga-panel">
<img class="ga-background" src="path/to/image2.jpg"/>
</div>
<div class="ga-panel">
<img class="ga-background" src="path/to/image3.jpg"/>
</div>
<div class="ga-panel">
<img class="ga-background" src="path/to/image4.jpg"/>
</div>
<div class="ga-panel">
<img class="ga-background" src="path/to/image5.jpg"/>
</div>
</div>
</div>
</body>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($) {
$('#my-accordion').gridAccordion();
});
</script>Grid Accordion has 40+ customizable options. More about this in the JavaScript API doc.
Detailed usage instructions
Support
If you found a bug or have a feature suggestion, please submit it in the Issues tracker.
License
The plugin is available under the MIT license.