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

  • Bikes
    • Hybrid

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • Freight

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • Mountain

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • Road »
  • Cars
    • Sport

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • Family

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • SUV »
  • Boats »
  • Bikes
    • Hybrid

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • Freight

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • Mountain

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • Road »
  • Cars
    • Sport

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • Family

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan aliquet quam ac tempor. Mauris ac dolor nisi. Phasellus condimentum justo sit amet augue blandit at viverra lectus tempor. Morbi interdum, nisl eget dapibus hendrerit, enim mi rutrum velit, quis dictum nibh neque at nibh. Fusce facilisis nunc quis ipsum accumsan eget hendrerit ipsum venenatis. Nullam consectetur dignissim justo, rutrum semper neque varius facilisis. Nulla condimentum hendrerit tortor a sodales. Etiam vitae justo sed tortor luctus dapibus. Vivamus elit quam, vehicula at mattis quis, laoreet eu dui. Phasellus sapien magna, convallis quis posuere ut, bibendum bibendum odio. Etiam ac mauris libero, sit amet rhoncus mi. Donec sem nunc, sagittis non eleifend id, ullamcorper eget ipsum. Maecenas fermentum condimentum turpis eu consectetur. Proin ultricies bibendum ullamcorper. Ut lobortis nulla in ligula consectetur vel molestie turpis adipiscing. Phasellus urna risus, euismod vel viverra non, sagittis in odio.

        Donec et tincidunt orci. Cras nibh orci, aliquet sit amet feugiat non, sagittis et risus. Suspendisse ac leo lacus, quis cursus metus. Donec aliquam lorem ac massa dapibus pulvinar. Vestibulum scelerisque semper mattis. Suspendisse dapibus odio sed magna faucibus vel pulvinar ante tincidunt. Quisque purus mauris, tincidunt id gravida sed, blandit a mi. Donec placerat tellus quis est tempor posuere. Nam tristique sollicitudin mi sed accumsan. Fusce eu felis tortor, eget commodo tellus. Nullam suscipit arcu non erat dapibus mattis. Vestibulum laoreet pretium mi, et feugiat diam malesuada et. Donec a leo ut velit tempus accumsan. Morbi in dolor vitae tellus egestas dictum. Aliquam convallis elementum erat at faucibus. Donec nibh nibh, aliquam non placerat vitae, hendrerit condimentum ligula.

    • SUV »
  • Boats »

  • 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