DHTMLX Touch documentation

Accordion

Accordion is a component that presents collection of multiply panes placed vertically or horizontally (each pane consists of the header and body). The main difference from standart layout is that it can be collapsed, expanded by clicking on the header. Ui-related accordion inherits from layout.


Full code of the structure in the picture

Initialization

To init the component you need to perform a simple procedure - call initialization code.

Initialization code or an object constructor gives you a choice: you can create an object directly or by using common declaration.

dhx.ui.accordion({...})// direct declaration
//or
dhx.ui ({...})//common declaration

Parameters

Whatever variant of initialization you choose it will include some of the following parameters:

  • header - specifies a header in the expanded state.
    (boolean) - 'true' is default value, so just the 'false' value has a sense. 'false' will hide a header.
    (template) - an html template that will define the header content
  • header_alt - specifies a header in the collapsed state.
    (boolean) - the same situation as with 'header' parameter: 'true' is default value. If you set 'false', header content won't be changed in collapsed state.
    (template) - an html template that will define the header content in collapsed state
  • body - specifies the content of the pan.
    Here you can place all you want: nest another element, specify an HTML template and etc.

Please note, accordion is a derived class, i.e. it inherits all the features of the base classes (accordion → layoutView).

dhx.ui({ 
          view:"accordion",
	       cols:[{ 	
	       header:"panel 1",
	       header_alt:"panel 1 (closed)",
	       body:"upper"
	       }]
});

Brief information about 'id' (this parameter accordion inherits from the base class 'view').
You can set 'id' both for the whole accordion and for any of the pans.

Modes

UI-related accordion has 2 modes:

  • Single
    Just one pan can be expanded at the same time. To turn on this mode - use the parameter 'multi '.
  • Multi (default)
    All the pans can be expanded at the same time. The mode is set by default and you needn't to make any settings.
dhx.ui({
          cols:[{ view:"accordion",
		  type:"wide",
		  multi:false,
                  rows:[{ 	
		           header:"Catalog",
		           header_alt:false,
		           body:"#books#"
                  }]
	 }]
})
Expanded Collapsed Code Hide header Constant header
Vertical
{view:"accordion",
 type:"wide",
 rows:[
     {header:"header",
      header_alt:"header_alt",
      body:"body"
     }]
}
Horizontal
{view:"accordion",
 type:"wide",
 cols:[
     {header:"header",
      header_alt:"header_alt",
      body:"body"
     }]
}

Related how-tos