Responsive Searchable 3 Level Accordion
Is just another accordion.
Only better.
And for Wordpress.

See it in action!

skin: ribbon

skin: color

Options: allow many nodes open at one time

skin: classic

Options: auto expand, external search binded

skin: pointer

open method usage, open and close callbacks used

Open submenu using plugin open method:

Level 1:
Level 2:

responsive skins

  • Powerful options

    • Search feature!
    • "Accordion mode" can be turned off - you may disable auto closing of opened nodes
    • Auto-open feature: you may open any node you want with just one method call!
  • New layout possibilities

    • Responsive
    • HTML 5
    • Three nesting levels
    • Now 5 skins out of the box!
    • Easily skinnable - create your own skin in less than 10 minutes!
  • Lightweight, yet so smart

    • Just JavaScript and CSS: no PHP even for search feature needed!
    • Less than 3kB of JS code
    • Mobile devices support (iPhone, iPad tested)
    • Plugin construction - easy to extend for advanced programmers

Main features of Responsive 3 Level Accordion for Wordpress

widget

Implement it as a widget

Drag and drop it to your sidebar - that's it! You can easily select which menu to use or change accordion behavior.





shortcode

... or as a shortcode

Embed menu inside your post or page - exactly where you want it.





I18N support

Search functionality

Let the user type in searched phrase. The plugin will automagically open node with matched content and will highlight the exact match. If there is more than one match, it will show breadcrumbs to all matches.





Keyboard Navigation Available

Create it from WP Menu or HTML

Create your accordion from Wordpress Menu or ul/li elements





Easily skinnable

Easily skinnable

We've prepared 5 skins for you. Don't like any of them? It's just one CSS file you need to edit - it's that simple. Feel free to modify any predefined CSS.





Swipe mode

Mobile devices ready!

Our menu was tested on iPhone an iPad devices.





HTML5 and XHTML compatible

HTML5 and XHTML strict compatible

Our drilldown menu works perfectly fine on HTML5 websites as well as on older XHTML strict (or transitional) websites.





Smooth auto resize

Responsive or static

Accordion can adjust it's width automatically or have a fixed width.





Cross Browser

Cross-browser compability

Every major browser in the newest version is supported. CSS3 skins fall back nice for older browsers.





Configuration options

Widget options


Shortcode options


  • menu - select one of your already created wordpress menus
  • skin - accordion skin (default: classic)
  • event - activation method. Allowed: click or hover (default: click)
  • speed - how fast should accordion collapse/expand. Allowed: slow, normal, fast (default: normal)
  • easing - how animation should look like. Allowed: easeInOutQuint, linear, easeInOutQuad, easeOutBounce (default: linear)
  • oneOpenAtTime - 0 - accordion will not autocollapse last opened section. Allowed: 1 (yes), 0 (no) (default: 1)
  • search - where search input should be placed. Allowed: '' (empty), top, bottom (default: '' ie. function disabled)
  • searchText - search label (default: Search here)
  • width - '100%' - width of accordion. Allowed values are px and % ex. 100%, 150px
  • margintop - top margin (in px)
  • marginbottom bottom margin (in px)
  • marginleft - margin left (in px)
  • marginright - margin right (in px)

Known issues

  • None known :-)

Changelog

3 august 2012

  • added new skin
  • added API call: OPEN - now you may open any position you want with just one api call!
  • few minor performance improvements
  • added two callbacks: onOpen (before opening menu node) and onClose (before closing menu node). Both callbacks get parameter: "a" with the name of the node
createit