Responsive 3 Level Accordion for Wordpress

Wordpress installation

In order to use Responsive 3 Level Accordion for Wordpress, first thing you need to do is install this plugin:

1. Login into yout wordpress admin account
2. From menu go to Plugins - Add New - Upload
3. Select zip file you've downloaded and click Install Now

If you have any problems regarding plugin installation simply copy directory "createit-Responsive-3level-accordion-menu" folder into "wp-content/plugins" directory of your wordpress installation.
More information can be found here (official documentation)

After successful plugin installation, plugin must be activated:

1. From menu go to Plugins - Installed Plugins
2. Locate "Responsive 3Level Accordion menu" plugin and click "Activate"
3. That's it!

Before using actual widget or shortcode, we must make sure that we have at least 1 menu already created:

1. From menu go to Appearance - Menu
2. Create your menu and remember it's name - we will use it in widget or shortcode setup
3. More information can be found here (official documentation)

Plugin usage - widget

There are several ways you can embed accordion to your website. One of them is called widgets. In order to use this options follow steps explained below:

1. From menu go to Appeareance - Widgets
2. Locate "Responsive 3Level Accordion menu" in "Available Widgets" section and drag&drop it to appropriate sidebar
3. Once activated, small arrow next to "Responsive 3Level Accordion menu" should appear. Click it and change all the necessary settings:
   • Title - title for accordion
   • Select Menu - select one of your already created wordpress menus
   • Skin - accordion skin
   • Click or hover - activation method
   • Animation speed - how fast should accordion collapse/expand
   • Animation type - how animation should look like
   • Only one active - 'No' - accordion will not autocollapse last opened section
   • Width - '100%' - width of accordion. Allowed values are px and % ex. 100%, 150px
   • Margins - add margins to position accordion (in pixels) to top, right, bottom and left
   • Search position - where search input should be placed:
     • Hidden - do not show search functionality
     • Top - show search input before accordion
     • Bottom - show search input after accordion
   • Search text - search label

After proper setup, an accordion should appear on your website.

Plugin usage - menu shortcode

Accordion menu can be easily embedded into any page or post. To use it, simply paste this code into your post (minimal setup):

[ct-accordion-menu menu="Main"]
		

Available options are similar to widget's options (you can skip any of these and default values will be used instead):

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

Advanced plugin usage - accordion shortcode

Accordion can be easily embedded into any page or post without specifing which menu to use. This way you can create accordion exactly the way you want it.

Detailed example is available here

All options available for [ct-accordion-menu] shortcode are also available for [ct-accordion] - except menu parameter which will be ignored.

Please remember to use [ct-accordion] shortcode and NOT [ct-accordion-menu] for your custom accordion.

Plugin usage - shortcode in layout

Sometimes you need to use shortcode inside your own template (not post area). In order to do that, use this code:

<?php echo do_shortcode('[ct-accordion-menu menu="Menu"]'); ?>
		

Advanced

Skins

To create your own skin, follow these steps:

• copy any skin from plugin_dir/css/skins to plugin_dir/css/skins/MY_PLUGIN
• modify css and/or images - plugin will automatically add class name like skin-MY_PLUGIN
• that's it - widgets and shortcodes will autodetect your newly created skin

Any comments?

Did you find any bug? Or maybe see any feature that would be nice to have? Or maybe just wanna say "hi"? Mail us at [email protected], we'll be glad to talk to you!