Matrix Rows with Expandable Details Sections

An expandable/collapsible details section within a matrix question allows form creators to include additional information or sub-questions beneath each main row of the matrix. This type of data representation enables you to keep the form concise and optimizes the space the question takes up on a page. Users can click the + and - icons placed next to each main row to view or hide these details sections as needed. This helps organize complex multi-row data or sub-questions and enhance the overall structure and clarity of the matrix table. The following example demonstrates how to add and configure an expandable details section within a Dynamic Matrix using the SurveyJS Form Library.

Detail rows are supported by the Multi-Select Matrix and Dynamic Matrix question types. To specify the detail row content, populate a matrix's detailElements array with objects that configure individual form fields. These form fields will be displayed in all detail rows within this matrix.

To display buttons that expand detail rows, set the matrix's detailPanelMode property to one of the following values:

• "underRowSingle" - Expands a detail row while collapsing other detail rows, as shown in this demo.
• "underRow" - Expands a detail row without collapsing other detail rows.

In a Dynamic Matrix, respondents can add new records at runtime. Enable the detailPanelShowOnAdding property if you want to expand the detail row of a new record immediately after the record is added. This property is enabled in the demo you are viewing.