Check documentation for the latest version of dhtmlxSuite Expanding/Collapsing Cells DHTMLX Docs

Expanding/Collapsing Cells


Expanded state is the state when a cell is open, i.e. the user can see both header and body of the cell.
Collapsed state is the state when a cell is closed, i.e. the user can see only the header of the cell.

Common logic

If the last visible cell in a row/column becomes collapsed, the nearest collapsed cell will be expanded instead. The component expands either the nearest left cell or the nearest right cell (if there is no nearest left one).

In other words, if there are two or more cells in a row/column, at least one of them will always be expanded.


You can localize the tooltip of the "Expand/Collapse" button into the desired language by using the following technique:

dhtmlXLayoutCell.prototype.i18n.expand = "Expand/Collapse";


To expand an item, use the expand method:


To collapse an item, use the collapse method:


Related sample:  Expanding/collapsing cells

Back to top