News Examples Documentation Download Buy Forum Contact



XML Extensions


Third Party Software
for krpano

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.

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