---
title: Zoom In/Out and Expand/Collapse Survey Elements
product: Survey Creator
description: Explore our interactive JavaScript form builder demo featuring zoom in/out functionality, expand/collapse options on page drag, and easy-to-use expand/collapse buttons for efficient survey management.
framework: jQuery
source: https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/jquery
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Zoom In/Out and Expand/Collapse Survey Elements (jQuery)

Survey Creator allows users to create surveys and forms of any complexity and length. However, longer forms can be challenging to navigate and manage because their structure becomes harder to see. To facilitate the work with surveys, especially when rearranging its elements, survey authors can collapse and expand form elements and adjust the scale of the entire form on the design surface using a set of UI controls. These tools help achieve a more compact view to easily reposition survey elements.

## Scale a Survey 

With scaling, survey creators can zoom in on a specific part of a survey or zoom out to get a clear view of its structure. Users can control the zoom level using the "Zoom In," "Zoom Out," and "Zoom to 100%" buttons. To hide these buttons and disable the zoom feature, set the [`allowZoom`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#allowZoom) property to `false`:

```js
const creatorOptions = {
  // ...
  allowZoom: false
};
const creator = new SurveyCreatorModel(creatorOptions);
```

## Expand and Collapse Survey Elements

To make editing of survey elements easier, questions, panels, and pages on the design surface can expand or collapse. Users can control this by using individual Expand/Collapse buttons, along with the "Collapse All" and "Expand All" buttons. When collapsing or expanding all elements, users can also activate the "Lock Question State" button. This ensures that when using the "Collapse All" and "Expand All" buttons, only pages and panels are affected, while the state of the questions remains unchanged. If you wish to disable the ability to expand and collapse elements in the UI, simply set the [`expandCollapseButtonVisibility`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#expandCollapseButtonVisibility) property to `"never"`:

```js
const creatorOptions = {
  // ...
  expandCollapseButtonVisibility: "never"
};
const creator = new SurveyCreatorModel(creatorOptions);
```

You can use the [`collapsePages`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapsePages), [`collapsePanels`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapsePanels), and [`collapseQuestions`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapseQuestions) properties to specify the initial state for pages, panels, and questions:

```js
const creatorOptions = {
  // Collapse all survey elements at startup
  collapsePages: true,
  collapsePanels: true,
  collapseQuestions: true
};
const creator = new SurveyCreatorModel(creatorOptions);
```

Survey elements can be expanded and collapsed at runtime using the [`expandElement(el)`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#expandElement), [`collapseElement(el)`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#collapseElement), [`expandAll()`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#expandAll), and [`collapseAll()`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#collapseAll) methods. In addition, you can handle the [`onElementGetExpandCollapseState`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onElementGetExpandCollapseState) event to change an element's state in response to a certain action or event, for example, when a drag and drop operation starts or users click the "Expand All" button. In this demo, the `onElementGetExpandCollapseState` event is used to expand and select the last page when a survey JSON schema is loaded. Refer to the Code tab for a code example.

## Collapse Pages on Drag Start

Survey pages on the design surface can automatically collapse when users start dragging a survey element to reposition it. This feature helps rearrange surveys quickly and efficiently. By default, pages collapse only when users begin dragging a page. If you also want pages to collapse when users start dragging a question or panel, enable the [`collapseOnDrag`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapseOnDrag) property as shown below. In this case, when moving a question or panel, pages collapse to help you select a target page. As you drag an element over it, the page expands, allowing you to see its layout and choose the perfect spot for placement. In this demo, the `collapseOnDrag` property is disabled.

```js
const creatorOptions = {
  // ...
  collapseOnDrag: true
};
const creator = new SurveyCreatorModel(creatorOptions);
```

## 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/survey_json.js`

```js
export const surveyJSON = {
  "title": "Product/Market Fit Survey Template",
  "pages": [
    {
      "name": "user-information",
      "title": "User Information",
      "elements": [
        {
          "type": "radiogroup",
          "name": "customer_role",
          "title": "What best describes your role?",
          "choices": [
            "Engineering Lead",
            "Project Manager",
            "Software Developer",
            "Designer",
            "Product Manager",
            "CEO / Founder",
            "Customer Support"
          ],
          "showOtherItem": true,
          "otherText": "Other",
          "colCount": 2
        },
        {
          "type": "radiogroup",
          "name": "start_using",
          "title": "How did you start using the product?",
          "choices": [
            {
              "value": "created",
              "text": "I created my account"
            },
            {
              "value": "invited",
              "text": "I was invited to an account"
            }
          ]
        },
        {
          "type": "radiogroup",
          "name": "product_discovering",
          "title": "How did you first discover the product? ",
          "choices": [
            "Friend or colleague",
            "Search engine",
            "Facebook",
            "Twitter",
            "Blog"
          ],
          "showOtherItem": true,
          "otherText": "Other",
          "colCount": 2
        },
        {
          "type": "radiogroup",
          "name": "paid_customer",
          "title": "Do you currently pay for the product? ",
          "isRequired": true,
          "choices": [
            "Yes",
            "No"
          ]
        }
      ]
    },
    {
      "name": "product-satisfaction",
      "title": "Product Satisfaction",
      "elements": [
        {
          "type": "radiogroup",
          "name": "product_fit",
          "title": "How would you feel if you could no longer use the product?",
          "isRequired": true,
          "choices": [
            {
              "value": "3",
              "text": "Very disappointed"
            },
            {
              "value": "2",
              "text": "Somewhat disappointed"
            },
            {
              "value": "1",
              "text": "Not disappointed"
            }
          ]
        },
        {
          "type": "comment",
          "name": "product_fit_comment",
          "visibleIf": "{product_fit} notempty",
          "title": "Please help us understand why you selected the answer above"
        }
      ]
    },
    {
      "name": "product-alternatives-benefits",
      "title": "Alternatives & Benefits",
      "elements": [
        {
          "type": "radiogroup",
          "name": "product_alternative",
          "title": "What would you use as an alternative if [the product] were no longer available?",
          "choices": [
            "Alternative 1",
            "Alternative 2",
            "Alternative 3",
            "Alternative 4",
            "Alternative 5",
            "Alternative 6"
          ],
          "showOtherItem": true,
          "otherText": "Other (please name)",
          "colCount": 2
        },
        {
          "type": "radiogroup",
          "name": "product_benefit",
          "title": "What is the primary benefit that you have received from the product?",
          "choices": [
            "Benefit 1",
            "Benefit 2",
            "Benefit 3",
            "Benefit 4",
            "Benefit 5",
            "Benefit 6"
          ],
          "showOtherItem": true,
          "colCount": 2
        },
        {
          "type": "radiogroup",
          "name": "product_recommend",
          "title": "Have you recommended the product to anyone?",
          "choices": [
            "Yes",
            "No"
          ]
        }
      ]
    },
    {
      "name": "nps-feedback",
      "title": "Net Promoter Score & Feedback",
      "elements": [
        {
          "type": "rating",
          "name": "nps_score",
          "title": "How likely are you to recommend the product to a friend or colleague?",
          "isRequired": true,
          "rateCount": 11,
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "Most unlikely",
          "maxRateDescription": "Most likely"
        },
        {
          "type": "radiogroup",
          "name": "favorite_functionality",
          "title": "What's your favorite functionality / add-on for the product?",
          "choices": [
            "Feature 1",
            "Feature 2",
            "Feature 3",
            "Feature 4",
            "Feature 5",
            "Feature 6"
          ],
          "showOtherItem": true,
          "colCount": 2
        },
        {
          "type": "comment",
          "name": "product_improvement",
          "title": "How could the product be improved to better meet your needs?"
        }
      ]
    },
    {
      "name": "follow-up",
      "title": "Follow-Up",
      "elements": [
        {
          "type": "multipletext",
          "name": "contact_customer",
          "title": "Want us to follow up? Leave your name and email here:",
          "items": [
            {
              "name": "Name"
            },
            {
              "name": "E-mail",
              "inputType": "email",
              "validators": [
                {
                  "type": "email"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};
```

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { surveyJSON } from "./survey_json";
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({ collapsePages: true });
creator.onElementGetExpandCollapseState.add((_, options) => {
    // Expand and select the last page on loading
    if (options.reason === "loading") {
        if (options.element.visibleIndex === creator.survey.pageCount - 1) {
            options.collapsed = false;
            creator.selectedElement = options.element;
        }
    }
});
creator.JSON = surveyJSON;

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

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "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/expand-and-collapse-survey-elements/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/vue3js.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/vanillajs.md)