Feature-rich Grid Slider jQuery Plugin - Grid Accordion

File Size: 252 KB
Views Total: 2290
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Feature-rich Grid Slider jQuery Plugin - Grid Accordion

Grid Accordion is a responsive, touch-enabled, retina-ready, high-performance grid & slider plugin for presenting anything on the page.

Use it to create a fully responsive grid where you can smoothly expand and collapse grid items like an accordion.

This is the upgraded version of the Feature-rich Accordion Slider plugin, which displays items (accordion panels) in two-dimensional grid space, rather than in a single row.

More Features:

  • Image lazy loading.
  • Dynamic content loading: JSON or XML.
  • Allows multiple layers at the same panel.
  • Smooth transitions.
  • Pagination bullets.
  • Supports Youtube/Vimeo/Sublime/HTML5 videos.
  • Keyboard & Mouse interactions.
  • Can be integrated with any lightbox plugin like the known FancyBox.
  • Supports deep linking.

Table Of Contents:

How to use it:

1. Include the Grid Slider jQuery plugin.

<link rel="stylesheet" href="../dist/css/grid-accordion.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/jquery.gridAccordion.min.js"></script>

2. Add your content as accordion panels to the grid.

<div id="example" class="grid-accordion">
  <div class="ga-panels">
    <div class="ga-panel">
      <img class="ga-background" src="1.jpg"/>
    <div class="ga-panel">
      <img class="ga-background" src="2.jpg"/>
    <div class="ga-panel">
      <img class="ga-background" src="3.jpg"/>
    <div class="ga-panel">
      <img class="ga-background" src="4.jpg"/>
    <div class="ga-panel">
      <img class="ga-background" src="5.jpg"/>

3. Initialize the plugin on the parent container to generate a basic accordion grid.

  // options here

4. Enable lazy loading & high resolution/retina images.

<img class="ga-background" 
     data-retina="/path/to/original/[email protected]" />

5. Add multiple layers to accordion panels using the following CSS classes and HTML data attributes.

  • ga-opened: The layer will be visible only when the panel is opened.
  • ga-closed: The layer will be visible only when the panel is closed.
  • ga-black: Black background.
  • ga-white: Light background.
  • ga-padding: Add a 10px padding to the layer.
  • ga-rounded: Rounded corner.
  • data-width: Width of the layer.
  • data-height: Height of the layer.
  • data-depth: Z-index CSS property.
  • data-position: 'topLeft' (default), 'topRight', 'bottomLeft' or 'bottomRight'
  • data-horizontal: Fixed value, percentage value or 'center'.
  • data-vertical: The same as 'data-horizontal'.
  • data-show-transition: 'left', 'right', 'up' or 'down'.
  • data-hide-transition: The same as 'data-show-transition'.
  • data-show-offset: Add an offset to the layer.
  • data-hide-offset: Add an offset to the layer.
  • data-show-duration: The duration of the transition.
  • data-hide-duration: The duration of the transition.
  • data-show-delay: Transition delay.
  • data-hide-delay: Transition delay.
<div class="ga-panel">
  <a href="#">
    <img class="ga-background" src="./dist/css/images/blank.gif" data-src="1.jpg" data-retina="[email protected]" />
  <div class="ga-layer ga-closed ga-white panel-counter" 
     data-position="bottomLeft" data-horizontal="8" data-vertical="8">
     Panel 1
  <h3 class="ga-layer ga-opened ga-black ga-padding" 
    data-horizontal="40" data-vertical="62%" 
    data-show-transition="left" data-hide-transition="left">
    Lorem ipsum dolor sit amet
  <p class="ga-layer ga-opened ga-white ga-padding hide-medium-screen" 
    data-horizontal="40" data-vertical="74%" data-width="350" 
    data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

6. Load content from JSON.

  JSONSource: '/path/to/accordion.json',
// accordion.json
  "accordion": {
    "panels": [
        "background": {"source": "/path/to/1.jpg"},
        "backgroundRetina": {"source": "path/to/[email protected]"},
        "backgroundOpened": {"source": "path/to/alt1.jpg"},
        "backgroundOpenedRetina": {"source": "path/to/[email protected]"},
        "backgroundLink": {"address": "https://jqueryscript.net"},
        "layers": [
          {"content": "Panel 1", "style": "closed white padding panel-counter", "position": "bottomLeft", "horizontal": "8", "vertical": "8"},
          {"content": "Lorem ipsum dolor sit amet", "style": "opened black padding", "showTransition": "down", "hideTransition": "up", "horizontal": "20", "vertical": "20"}

7. Load content from XML.

  JSONSource: '/path/to/accordion.xml',
<!-- accordion.xml -->
    <backgroundRetina>path/to/[email protected]</backgroundRetina>
    <backgroundOpenedRetina>path/to/[email protected]</backgroundOpenedRetina>
    <layer vertical="8" horizontal="8" position="bottomLeft" style="closed white vertical panel-counter">Panel 1 </layer>
    <layer vertical="10%" horizontal="40" style="opened black padding" hideTransition="left" showTransition="left">Lorem ipsum dolor sit amet </layer>
    <layer vertical="22%" horizontal="40" style="opened white padding" hideTransition="left" showTransition="left" hideDelay="200" showDelay="200">consectetur adipisicing elit </layer>
    <layer vertical="34%" horizontal="40" style="opened black padding" hideTransition="left" showTransition="left" hideDelay="500" showDelay="400" width="350">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </layer>

8. It also supports Youtube/Vimeo/Sublime/HTML5 videos.

<!-- Youtube -->
<div class="ga-layer" data-horizontal="325">
  <iframe class="ga-video" src="https://www.youtube.com/embed/VIDEO-ID?enablejsapi=1&amp;wmode=opaque&amp;rel=0" width="500" height="280" frameborder="0" allowfullscreen></iframe>

<!-- Vimeo -->
<div class="ga-layer" data-horizontal="325">
  <iframe class="ga-video" src="//player.vimeo.com/video/VIDEO-ID" width="498" height="280" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<!-- HTML5 Video -->
<div class="ga-layer" data-horizontal="325">
  <video id="video3" class="ga-video" controls="controls" preload="none" width="497" height="280" poster="poster.jpg">
    <source src="1.mp4" type='video/mp4'/>
    <source src="1.ogg" type='video/ogg'/>

<!-- Video.js -->
<div class="ga-video" data-videojs-id="video1">
  <video id="video1" class="video-js vjs-default-skin" poster="poster.jpg" width="500" height="350" controls="controls" preload="none" data-setup="{}">
    <source src="1.mp4" type="video/mp4"/>
    <source src="1.ogv" type="video/ogg"/>

<!-- Sublime Video -->
<video id="video2" class="ga-video sublime" poster="poster.jpg" width="500" height="350" controls="controls" preload="none">
  <source src="1.mp4" type="video/mp4"/>
  <source src="1.ogv" type="video/ogg"/>

9. Full plugin options.


  // width/height
  width: 800,
  height: 400,

  // enable responsive layout
  responsive: true,

  // 'auto' or 'custom'
  responsiveMode: 'auto',

  // aspect ratio
  aspectRatio: -1,

  // 'horizontal' or 'vertical'.
  orientation: 'horizontal',

  // 0 for the first panel
  startPanel: -1,

  // number of rows
  rows: 3,

  // number of columns
  columns: 4,

  // the size of the opened panel
  // fixed or percentage value
  openedPanelWidth: 'max',
  openedPanelHeight: 'max',

  // max size of opened panel
  maxOpenedPanelWidth: '70%',
  maxOpenedPanelHeight: '70%',

  // 'hover', 'click', or 'never'
  openPanelOn: 'hover',

  // close the opened panels on mouse out
  closePanelsOnMouseOut: true,

  // the delay in milliseconds between the movement of the mouse pointer and the opening of the panel
  mouseDelay: 200,

  // the distance between consecutive panels
  panelDistance: 0,

  // duration on ms
  openPanelDuration: 700,
  closePanelDuration: 700,
  pageScrollDuration: 500,

  // easing function
  pageScrollEasing: 'swing',

  /* e.g.
    960: {visiblePanels: 5},
    800: {visiblePanels: 3, orientation: 'vertical', width: 600, height: 500},
    650: {visiblePanels: 4},
    500: {visiblePanels: 3, orientation: 'vertical', aspectRatio: 1.2}
  breakpoints: null,

  // 0 for the first page
  startPage: 0,

  // adds shadow to the accordion slider
  shadow: true,

  // determines if the panels will be shuffled/randomized
  shuffle: false,

  // autoplay options
  autoplay: true,
  autoplayDelay: 5000,
  autoplayDirection: 'normal', // 'normal' or 'backwards
  autoplayOnHover: 'pause', // 'pause', 'stop' or 'none'

  // keyboard options
  keyboard: true,
  keyboardOnlyOnFocus: false,
  keyboardTarget: 'panel', // 'panel' or 'page',

  // mousewheel options
  mouseWheel: true,
  mouseWheelSensitivity: 10,
  mouseWheelTarget: 'panel', // 'panel' or 'page'

  // swap background options
  swapBackgroundDuration: 700,
  fadeOutBackground: false,

  // touch swipe opitons
  touchSwipe: true,
  touchSwipeThreshold: 50,

  // 'playVideo' or 'none'
  openPanelVideoAction: 'playVideo',

  // 'pauseVideo' or 'stopVideo'
  closePanelVideoAction: 'pauseVideo',

  // 'stopAutoplay' or 'none'
  playVideoAction: 'stopAutoplay',

  // 'startAutoplay' or 'none'
  pauseVideoAction: 'none',

  // 'startAutoplay', 'nextPanel', 'replayVideo' or 'none'
  endVideoAction: 'none',

  // callback functions
  // or $('#example').on('callbackName', function(event) {})
  init: function() {},
  update: function() {},
  accordionMouseOver: function() {},
  accordionMouseOut: function() {},
  panelClick: function(index) {},
  panelMouseOver: function(index) {},
  panelMouseOut: function(index) {},
  panelOpen: function(index, previousIndex) {},
  panelsClose: function(previousIndex) {},
  pageScroll: function(index) {},
  panelOpenComplete: function(index) {},
  panelsCloseComplete: function(previousIndex) {},
  pageScrollComplete: function(index) {},
  breakpointReach: function(size, settings) {},
  videoPlay: function() {},
  videoPause: function() {},
  videoEnd: function() {},


10. API methods.

// $('#example').gridAccordion('methodName', value);
// or 
// var accordion = $('#example').data('gridAccordion');
// accordion.methodName(value);

// Returns all the data of the panel at the specified index.

// Returns the index of the current panel.

// Returns the total number of panels.

// Opens the next panel.

// Opens the previous panel.

// Opens the panel at the specified index.

// Closes all panels.

// Gets the number of visible panels.

// Gets the number of pages.

// Gets the index of the page currently displayed.

// Scrolls to the specified page.

// Goes to the next page.

// Goes to the previous page.

// Destroy

// Updates the accordion

// Removes all panels

// resize the accordion slider

10. Events.

// $('#example').on(eventType, callback);
// $('#example').off(eventType);

$('#example').on('init', function(event) {
  // do something

$('#example').on('update', function(event) {
  // do something

$('#example').on('accordionMouseOver', function(event) {
  // do something

$('#example').on('accordionMouseOut', function(event) {
  // do something

$('#example').on('panelClick', function(event, index) {
  // do something

$('#example').on('panelMouseOver', function(event, index) {
  // do something

$('#example').on('panelMouseOut', function(index) {
  // do something

$('#example').on('panelOpen', function(event, index, previousIndex) {
  // do something

$('#example').on('panelsClose', function(event, previousIndex) {
  // do something

$('#example').on('pageScroll', function(event, index) {
  // do something

$('#example').on('panelOpenComplete', function(event, index) {
  // do something

$('#example').on('panelsCloseComplete', function(event, previousIndex) {
  // do something

$('#example').on('pageScrollComplete', function(event, index) {
  // do something

$('#example').on('breakpointReach', function(event, size, settings) {
  // do something

$('#example').on('videoPlay', function(event) {
  // do something

$('#example').on('videoPause', function(event) {
  // do something

$('#example').on('videoEnd', function(event) {
  // do something

This awesome jQuery plugin is developed by bqworks. For more Advanced Usages, please check the demo page or visit the official website.