Accordion Slider

Responsive and Touch-enabled accordion for WordPress and JavaScript

Example 1

Example 2

Example 3

Example 4

Works great on any screen

Fully Responsive

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.

Touch-enabled

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.

Pagination

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.

Visually appealing

Animated Layers

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.

Smooth Animations

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

Retina support

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).

Mindful of usability and semantics

Keyboard and mouse navigation

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.

Lazy Loading

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.

SEO-Friendly

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.

Many possibilities for designers and developers

Breakpoints

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.

Powerful JavaScript API

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.

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

Lightbox integration

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

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.

Swap Image

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.

WordPress Features

Powerful, yet non-obtrusive

Dynamic Content

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.

Caching

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.

Automatic Updates

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.

Built with User Experience in mind

Clean and Intuitive UI

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.

Inline Help

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.

Admin Preview

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.

Carefully coded

Best Practices

The Accordion Slider plugin uses WordPress development best practices, to ensure smooth and conflict-less integration with any WordPress theme or plugin.

Optimized

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.

Secure

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

Use it anywhere

Load Anywhere

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.

MultiSite

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.

Import and Export

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.

Easily customizable and highly extendable

Advanced Shortcodes

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.

Action and Filter Hooks

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.

Premium Add-ons

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.

Premium Add-ons

Custom CSS and JavaScript

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.

Revisions

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.

Purchase and read more about premium add-ons here →

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

Downloads

JavaScript | jQuery Plugin | WordPress Plugin