by bqworks
Example 1
Example 2
Example 3
Example 4
Accordion Slider is fully responsive and even allows you to change the layout of the accordion for different screen sizes. Also, the responsiveness can be automatic or custom.
The accordion supports touch swipe and tap gestures, ensuring a good user experience on mobile devices. Also, it's possible to use mouse drag actions on desktop devices.
You can set a number of visible panels per "page", instead of displaying all panels from the start. This feature allows you to add as many panels as you want, without worrying about screen space.
The accordion supports both animated and static layers. Also, it's possible to set certain layers to display only when panels are opened and other layers to display only when panels are closed.
The accordion is optimized to offer the smoothest animations possible, by using CSS3 Transitions and the RequestAnimationFrame API for the layer and panel animations.
It's possible to specify high resolution images for Retina screens. These images will be loaded on all screens that have a high PPI (pixels per inch).
The accordion slider can be navigated by keyboard or mouse wheel. The Left and Right arrows keys can change the panels or pages, and the Enter key will open the link or lightbox.
The images can be loaded only when they are viewed by the visitor, thus reducing the loading time of the page significantly. This is especially useful when loading many images.
All the content inside the accordion will be visible to search engines. Also, inside the accordion you can use any HTML tags, so that your content is as semantic and SEO-friendly as possible.
Similarly to how CSS media queries work, the accordion's settings can be changed at different screen sizes. For examples, you can reduce the number of visible panels on smaller screens, as seen in Example 3.
The Accordion Slider's rich API allows you to control the accordion from external sources, change its properties on runtime, add and remove content after the accordion has loaded, and more.
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.
Accordion Slider 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 you to link to specific panels in the accordion, as seen in Example 4. The link can exist in the same page with the accordion or in another page.
The background image can be replaced by another image when the panel is opened (as seen in Example 2), allowing you to make the accordion slider more engaging.
Easily load content from your posts (i.e., featured image, post title, excerpt, etc.), from WordPress galleries, and from Flickr. You can even combine multiple content types in the same accordion.
All accordions will be automatically cached, thus making them load very fast, without causing any slowdown on your server. This is especially useful when you load content from posts, galleries or Flickr.
Easily update the Accordion Slider plugin, directly from the WordPress Dashboard, just like you update most plugins. All your customizations will be preserved during updates.
The plugin's UI uses the default style of WordPress and makes it extremely easy to manage accordions and panels. For example, you can easily sort panels and layers with a simple drag and drop.
Every important element is accompanied by inline information about how to use that respective element/feature. In some cases, the inline information also contains a video tutorial.
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.
The Accordion Slider plugin uses WordPress development best practices, to ensure smooth and conflict-less integration with any WordPress theme or plugin.
In addition to the caching feature mentioned before, another optimization-related feature is the loading of CSS and JavaScript files only in posts where the accordion is added.
The plugin uses the WordPress recommended practices for preventing any unauthorized access and keeping all your data safe.
The accordion can be inserted in posts and pages using the shortcode, in the template files using PHP code, or in any widget area using the built-in accordion widget.
The plugin can be installed without problems in MultiSite environments. You can activate it per site or network-wide, and each site will have its own separate accordions.
Allows you to create backups or move accordions between installations. The examples showcased above are bundled with the plugin and you can import them into your own installation.
You can use shortcodes to override existing accordions or even create new accordions from scratch, without using the admin area. This allows you to dynamically generate accordions.
The plugin provides over 20 hooks that allow developers to modify the accordion's output or add new functionality without having to change the plugin's core.
In addition to all the features presented here and packed with Accordion Slider 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 accordions and load it only on pages where there are published accordions. 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 accordion edits for comparison or backup purposes. Each 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.