News Examples Documentation Download Buy Forum Contact

Accordion Menu Plugin accordion-menu.xml for Flash and HTML5
by Alex Giannakidis -


Accordion Menus come handy because they are “spacesavers” in rich applications that need to have their content easily accessible. Especially in mobile devices, accordions menus are found everywhere. According to wikipedia: an accordion (in graphical user interfaces) is a vertically stacked list of items (e.g. labels or thumbnails). Each item can be “expanded” or “stretched” to reveal the content associated with that item. There can be zero or more items expanded at a time, depending on the configuration. In our case I split the accordion menu in groups and events. Groups are the items that can be expanded and reveal the event buttons. A group can have numerous events.

For testing purposes I' ve prepared an accordion menu generator that processes custom parameters and generates the menu "on the fly".
You can try it out here : Accordion Menu Generator

For further information about the usefulness of accordion menus and the development of the generator, read this article : An Accordion Menu Generator for the krpano viewer

This a free plugin. You are encouraged to use it in personal or commercial projects :) Please consider creditting.

If you are a developer and would like to take this plugin a step further, you can fork (and star) the github repository I've setup for this purpose.


accordion-menu.xml  (xml plugin, 14kb)

Syntax / XML Usage Example

  • Include accordion-menu.xml in your project
  • fill in your parameters in initParameters() (dimensions are in % percentage of the viewers width and height)
  • call createMenu() onstart
<action name="initParameters">
	set(varMW, 18);  
	set(varGH, 8); 
	set(varEH, 8);  
	set(varY, 2); 
	set(varX, 2); 
	set(varGN, 4); 
	set(varG1EN, 5); 
	set(varG2EN, 4); 
	set(varG3EN, 6); 
	set(varG4EN, 3); 
  • (the accordion menu uses the textfield.swf plugin as it's core element, so be sure to check file paths)
  • To label and set the onclick events of the buttons based on your preference include this in your code (for every button) :

Plugin Attributes

The above figure shows only part of the viewer. Blue dotted lines refer to dimensions (width, height, position) and green lines refer to quantity of group or event buttons. The required variables of the accordion menu are:
  • X: x position of menu (origin top left)
  • Y: y position of menu (origin top left)
  • MW: width of menu
  • GH: group buttons height
  • EH: event buttons height
  • GN: quantity of group buttons
  • G1EN: quantity of event buttons for group 1
  • G2EN: quantity of event buttons for group 2
  • G3EN: quantity of event buttons for group 3
  • G4EN: quantity of event buttons for group 4