Accordion

Accordion is a component that presents a collection of multiply panes placed vertically or horizontally (each pane consists of the header and body). The main difference from standard 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 a 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
  • headerAlt - specifies a header in the collapsed state.
    (boolean) - the same situation as with 'header' parameter: 'true' is a default value. If you set 'false', header content won't be changed in the collapsed state.
    (template) - an html template that will define the header content in the 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",
	       headerAlt:"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(multi:false)
    1. Just one pan can be expanded at the same time.
    2. You can't collapse all the pans at the same time - some pan will be always expanded.
  • Multi(multi:true)
    1. All the pans can be expanded at the same time.
    2. All the pans can be collapsed at the same time.

The default mode (if you don't specify multi parameter) unites the features of both modes:

1. All the pans can be expanded at the same time.
2. You can't collapse all the pans at the same time - some pan will be always expanded.

dhx.ui({
          cols:[{ view:"accordion",
		  type:"wide",
		  multi:false,
                  rows:[{ 	
		           header:"Catalog",
		           headerAlt:false,
		           body:"#books#"
                  }]
	 }]
})
Expanded Collapsed Code Hide header Constant header
Vertical
{view:"accordion",
 type:"wide",
 rows:[
     {header:"header",
      headerAlt:"headerAlt",
      body:"body"
     }]
}
Horizontal
{view:"accordion",
 type:"wide",
 cols:[
     {header:"header",
      headerAlt:"headerAlt",
      body:"body"
     }]
}

Related how-tos