Grid Accordion - Responsive and Touch-Enabled Grid

Grid Accordion combines the functionality of a grid gallery and an accordion slider, offering you an interesting method to display your portfolio.

For Designers

  • Fully responsive – the grid is responsive out of the box and provides 2 responsive modes: auto and custom
  • Touch-enabled – supports touch swipe gestures on touch-screen devices and mouse drag on the desktop
  • Customizable rows and columns – you can change the number of rows and/or columns in the grid based on the screen’s size
  • Layers – Grid Accordion supports animated and static layers that can hold any content: from simple text to videos
  • Image Swap – it’s possible to swap the background image when the panel opens
  • Retina-ready – the accordion supports alternative, high-resolution images for screens with high PPI, like the Retina display
  • Lazy-loading – the images will be loaded only they are in the visible area
  • Deep-linking – it’s possible to open a panel from a link, whether the link is in the same page or in another page
  • Keyboard navigation – it’s possible to navigate through the grid accordion (panel by panel or page by page) using the keyboard
  • Automatic video control – integration with YouTube, Vimeo, HTML5 video, Sublime Video and Video.js
  • SEO-friendly
  • XML and JSON support

For Developers

  • Modular architecture – the plugin consist of several modules and you can build your own script, containing only the features you will be using
  • CSS3 transitions and RequestAnimationFrame – modern animation techniques are used in order to provide smooth animations
  • Powerful API – Grid Accordion provides multiple public method and callback functions, and also the possibility to change the properties on runtime

You can read more about the above features and see them in action here.

If you have any questions or need assistance integrating the accordion, please feel free to ask; I will gladly help you. Also, if you like this script, please take a moment to rate it :) Most of the buyers give this script 5 stars but if you plan to rate it lower than 5 stars I would really appreciate if you contact me first with your suggestions/complaints; maybe I can resolve those issues :) Thank you!

Changelog

v 2.4.1 ( 12 December 14 )
* some bug fixes

v 2.4 ( 5 November 14 )
* add shuffle option
* various fixes and improvements

v 2.3 (1 May 14)
* fixed background image swap when startPanel is used
* added the 'ga-closed' class by default when the accordion is initially closed
* fixed the 'ga-opened' class removal from the last opened panel
* added 0 margin and padding to background images to prevent unwanted styling

v 2.2  (6 April 2014)
* fixed non-responsive mode
* fixed removal of ga-opened class
* fixed link support when 'openPanelOn' is set to 'click'
* fixed touch-swipe support when 'openPanelOn' is set to 'click'
* added 'never' option for 'openPanelOn'
* added bottom margin to accordion when buttons are present
* simplified selectors in the CSS code
* improved support for inner HTML content
* added support for no-js class
* added preset font sizes for layers
* added CSS code that prevents unwanted CSS inheritance

v 2.1 (14 November 2013)
* added keyboardTarget property
* corrected documentation typos

v 2.0 (8 November 2013)
* rewritten the entire code and implemented a modular architecture
* added many new features, like responsiveness, touch swipe, animated layers, retina support, lazy-loading, pagination, automatic video control, etc.

v 1.2 (10 January 2012)
* updated the jQuery library to the latest version

v 1.1 (15 December 2010)
* added the possibility to have both landscape and portrait images in the same grid

v 1.0 (29 November 2010)
* first release
by
by
by
by
by
by