by bqworks
Example 1
Example 2
Example 3
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.
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.
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.
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).
Grid Accordion is optimized to offer the smoothest animations possible, by using CSS3 Transitions and the RequestAnimationFrame API for the layer and panel animations.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
Grid Accordion tries to ensure a smooth and conflict-less integration with any WordPress theme or plugin by implementing the WordPress development best practices.
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.
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.
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.
You can dynamically generate accordions, using only shortcodes, without the admin area. You can also override accordions created in the admin area.
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.
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.
A video is worth a thousand words. Find more video tutorials here.