---
title: Property Grid - Accordion View
product: Survey Creator
description: Discover the JavaScript form builder demo featuring how to enable an accordion mode for displaying all Property Grid categories at once. Easily expand and collapse categories to easily configure their nested properties.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/property-grid-accordion-view/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Property Grid - Accordion View (Vanilla JS)

By default, the Property Grid displays only one selected category at a time, allowing users to focus on the category's contents. As an alternative, the Property Grid supports accordion view, in which it displays all categories. Users can expand the categories to access nested properties and collapse them once the properties are configured. To activate the accordion view, set the [`propertyGridNavigationMode`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#propertyGridNavigationMode) property to `"accordion"`, as shown in this demo.

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";
import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

const creator = new SurveyCreator({ propertyGridNavigationMode: "accordion" });

creator.render("surveyCreatorContainer");
```

### `package.json`

```json
{
  "dependencies": {
    "survey-core": "latest",
    "survey-js-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-js": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/property-grid-accordion-view/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/property-grid-accordion-view/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/property-grid-accordion-view/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/property-grid-accordion-view/jquery.md)