Grid Accordion

Responsive and Touch-enabled grid for WordPress and JavaScript

Example 1

Example 2

Example 3

Works great on any screen

Fully Responsive

Grid Accordion is built with responsiveness in mind. It offers both an 'auto' and 'custom' mode, to make it easy to set up by anyone but also customizable by experienced users.


Grid Accordion will respond to touch-screen gestures, like touch-swipe or tap, providing mobile users a navigation method that they are familiar with.

Customizable rows and columns

It's possible to define the number of rows and columns in the grid. The script will automatically create as many pages as necessary to accommodate your configuration.

Visually appealing

Animated Layers

One of the most powerful features of the grid is the support of highly customizable layers, both static and animated. Layers can contain anything, from simple text to video content.

Retina support

Grid Accordion will allow you to specify high resolution images for Retina screens. These images will be loaded on all screens that have a high PPI (pixels per inch).

Smooth Animations

Grid Accordion is optimized to offer the smoothest animations possible, by using CSS3 Transitions and the RequestAnimationFrame API for the layer and panel animations.

Mindful of usability and semantics

Lazy Loading

You don't have to worry about loading many images because Grid Accordion provides the option to load images only when they are actually viewed by the visitor.


The accordion's content will be fully visible to search engines. Also, you can use any HTML tags in the accordion, ensuring that your content is as semantic and SEO-friendly as possible.

Keyboard and mouse navigation

The plugin offers alternative and handy navigation methods, by making it possible to open the panels or pages using the keyboard's arrow keys or the mouse wheel.

Many possibilities for designers and developers

Powerful JavaScript API

Grid Accordion provides a rich API that allows you to control the accordion from external sources, change its settings on runtime, add and remove content after the accordion has loaded, and much more.


The grid accordion's settings can be changed for different screen sizes, similarly to how CSS media queries work. For examples, you can reduce the number of columns and/or rows on smaller screens, as seen in Example 2.

Modular architecture

The underlying JavaScript code is modular, consisting of a core and several optional modules. If you're a developer, you can easily strip out code that you don't need, thus reducing the file size.

More useful features

Swap Image

The panel's background image can be replaced by another image when the panel is opened (as seen in Example 2), allowing you to make the grid accordion more engaging.

Lightbox integration

Grid Accordion can be integrated with any lightbox script. You can see this in action in Example 2. The Fancybox 2 lightbox is bundled with the accordion.

Deep linking

Deep linking allows linking to specific panels in the accordion, as seen in Example 3. The link can be in the same page with the accordion or in another page.

WordPress Features

Powerful, yet non-obtrusive

Dynamic Content

You can dynamically load content from posts (i.e., featured image, post title, excerpt, etc.), from WordPress galleries, and from Flickr. You can also combine multiple content types in the same accordion.

Automatic Updates

Grid Accordion can be updated automatically, directly from the WordPress Dashboard, just like you update most plugins. All your customizations will be preserved during updates.


All grid accordion instanced will be automatically cached, thus significantly improving the load speed and preventing any slowdown on your server. This is especially useful when you load content from posts, galleries or Flickr.

Built with User Experience in mind

Clean and Intuitive UI

The plugin's user interface is similar to the default WordPress interface. Also, the plugin's UI makes it easy to manage accordions and panels. For example, you can easily sort panels and layers with a simple drag and drop.

Admin Preview

You can easily preview all your changes directly in the admin area, without having to publish or update the accordion first. You can even test the responsiveness in the preview.

Inline Help

In the plugin's admin area, you will find inline information about every important element. In some cases, the inline information also contains a video tutorial.

Carefully coded


The Grid Accordion plugin uses the WordPress recommended practices for keeping all your data safe and preventing any unauthorized access.


Another optimization-related feature, in addition to the caching feature mentioned before, is the loading of CSS and JavaScript files only in posts where the accordion is added.

Best Practices

Grid Accordion tries to ensure a smooth and conflict-less integration with any WordPress theme or plugin by implementing the WordPress development best practices.

Use it anywhere

Multiple Publishing Methods

You can insert it in posts and pages by using a shortcode, you can insert it in template files by using PHP code, or in any widget area by using the built-in accordion widget.


Grid Accordion is fully compatible with MultiSite environments. Also, you can activate it network-wide or per site. Each site will have its own separate accordions.

Import and Export

You can easily move accordions between installations or create backups. The examples showcased above are bundled with the plugin and you can import them into your own installation.

Easily customizable and highly extendable

Action and Filter Hooks

The plugin provides over 20 hooks that allow developers to make changes without editing the plugin's core. This way, custom functionality will be preserved after updates.

Advanced Shortcodes

You can dynamically generate accordions, using only shortcodes, without the admin area. You can also override accordions created in the admin area.

Premium Add-ons

In addition to all the features presented here and packed with Grid Accordion for free, you have the option to further extend the functionality of the plugin with premium add-ons.

Premium Add-ons

Custom CSS and JavaScript

Add CSS and JavaScript code to the grids and load it only on pages where there are published grids. The add-on also features a syntax highlighting code editor, the capability to save, compare and restore revisions of the custom code.


Store records of your grid accordion edits for comparison or backup purposes. Each grid accordion stores its own list of revisions, allowing you to easily preview a revision, analyze its settings, compare it to other revisions or restore it.

Purchase and read more about premium add-ons here →

A video is worth a thousand words. Find more video tutorials here.


JavaScript | jQuery Plugin | WordPress Plugin