Press "Enter" to skip to content

A Responsive, Touch-Enabled jQuery Grid Accordion Component

Grid Accordion jQuery plugin is a responsive, touch-enabled jQuery grid accordion plugin that combines grid and accordion functionality. Use it to create a responsive grid where you can seamlessly expand and collapse grid elements like an accordion.

accordion slider, accordion slider jquery, searchable accordion jquery plugin, jquery accordion horizontal responsive, responsive horizontal accordion slider

Main features:

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

How to make use of 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 material 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>
    <div class="ga-panel">
      <img class="ga-background" src="2.jpg"/>
    </div>
    <div class="ga-panel">
      <img class="ga-background" src="3.jpg"/>
    </div>
    <div class="ga-panel">
      <img class="ga-background" src="4.jpg"/>
    </div>
    <div class="ga-panel">
      <img class="ga-background" src="5.jpg"/>
    </div>
  </div>
</div>

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

$('#example').gridAccordion({
  // options here
});

4. Enable lazy loading & excessive-decision/retina photos.

<img class="ga-background" 
     src="./dist/css/images/blank.gif" 
     data-src="/path/to/original/image.jpg" 
     data-retina="/path/to/original/image@2x.jpg" />

5. Add a number of layers to accordion panels utilizing the next CSS classes and HTML data attributes.

<div class="ga-panel">
  <a href="#">
    <img class="ga-background" src="./dist/css/images/blank.gif" data-src="1.jpg" data-retina="1.jpg@2x" />
  </a>
  <div class="ga-layer ga-closed ga-white panel-counter" 
     data-position="bottomLeft" data-horizontal="8" data-vertical="8">
     Panel 1
  </div>
  <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
  </h3>
  <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.
  </p>
</div>

6. Load content from JSON.

$('#example').gridAccordion({
  JSONSource: '/path/to/accordion.json',
});
// accordion.json
{
  "accordion": {
    "panels": [
      {
        "background": {"source": "/path/to/1.jpg"},
        "backgroundRetina": {"source": "path/to/1@2x.jpg"},
        "backgroundOpened": {"source": "path/to/alt1.jpg"},
        "backgroundOpenedRetina": {"source": "path/to/1@2x.jpg"},
        "backgroundLink": {"address": " "},
        "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.

$('#example').gridAccordion({
  JSONSource: '/path/to/accordion.xml',
});
<!-- accordion.xml -->
<accordion>
  <panel>
    <background>path/to/1.jpg</background>
    <backgroundRetina>path/to/1@2x.jpg</backgroundRetina>
    <backgroundOpened>path/to/1.jpg</backgroundOpened>
    <backgroundOpenedRetina>path/to/1@2x.jpg</backgroundOpenedRetina>
    <backgroundLink> </backgroundLink>
    <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>
  </panel>
  ...
</accordion>

8. It additionally helps 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>
</div>

<!-- 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>
</div>

<!-- 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>
</div>

<!-- 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"/>
  </video>
</div>

<!-- 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"/>
</video>

9. Full plugin choices.

$('#example').gridAccordion({

  // 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 strategies.

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

// Returns all the data of the panel at the specified index.
accordion.getPanelAt(index);

// Returns the index of the current panel.
accordion.getCurrentIndex();

// Returns the total number of panels.
accordion.getTotalPanels();

// Opens the next panel.
accordion.nextPanel();

// Opens the previous panel.
accordion.previousPanel();

// Opens the panel at the specified index.
accordion.openPanel(index);

// Closes all panels.
accordion.closePanels();

// Gets the number of visible panels.
accordion.getVisiblePanels();

// Gets the number of pages.
accordion.getTotalPages();

// Gets the index of the page currently displayed.
accordion.getCurrentPage();

// Scrolls to the specified page.
accordion.gotoPage(index);

// Goes to the next page.
accordion.nextPage();

// Goes to the previous page.
accordion.previousPage();

// Destroy
accordion.destroy();

// Updates the accordion
accordion.update();

// Removes all panels
accordion.removePanels();

// resize the accordion slider
accordion.resize();

11. 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
});

Feature-rich Grid Slider jQuery Plugin, Grid Accordion Github, jquery skewed slider, vertical accordion wordpress plugin


See Demo And Download

Official Website(bqworks): Click Here

This superior jQuery/javascript plugin is developed by bqworks. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.