---
title: Change Question Visibility
product: Form Library
description: Make sure respondents only see questions relevant to them by using the visibleIf property that allows you to make questions visible or invisible based on preconfigured conditions. View a free demo for JavaScript to learn more.
framework: Vanilla JS
source: https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/vanillajs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Change Question Visibility (Vanilla JS)

SurveyJS Form Library allows you to show or hide any survey element based on certain criteria, for example, the response to the current question. With this capability, you can implement skip logic and branching in your survey.

To conditionally change the visibility of a survey page, panel, or question, specify its [`visibleIf`](/form-library/documentation/api-reference/question#visibleIf) property. It accepts a Boolean [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions). The survey element becomes visible when this expression evaluates to `true`. In this demo, a survey displays additional questions depending on the value you select in the NPS question. Refer to the following help topic for more information: [Conditional Visibility](/form-library/documentation/design-survey/conditional-logic#conditional-visibility).

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/index.css`

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

### `src/index.js`

```js
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
});

survey.render(document.getElementById("surveyElement"));
```

### `src/json.js`

```js
export const json = {
  "title": "NPS Survey Question",
  "logo": "https://api.surveyjs.io/private/Surveys/files?name=bdf16c7e-fa1e-4e31-9d82-a6df1982c224",
  "logoWidth": "200px",
  "logoHeight": "80px",
  "logoFit": "cover",
  "logoPosition": "right",
  "elements": [
    {
      "type": "rating",
      "name": "nps-score",
      "title": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
      "rateMin": 0,
      "rateMax": 10,
      "minRateDescription": "Very unlikely",
      "maxRateDescription": "Very likely"
    },
    {
      "type": "comment",
      "name": "disappointing-experience",
      "visibleIf": "{nps-score} <= 5",
      "title": "How did we disappoint you and what can we do to make things right?",
      "maxLength": 300
    },
    {
      "type": "comment",
      "name": "improvements-required",
      "visibleIf": "{nps-score} >= 6",
      "title": "What can we do to make your experience more satisfying?",
      "maxLength": 300
    },
    {
      "type": "checkbox",
      "name": "promoter-features",
      "visibleIf": "{nps-score} >= 9",
      "title": "Which of the following features do you value the most?",
      "description": "Please select no more than three features.",
      "isRequired": true,
      "choices": [
        {
          "value": "performance",
          "text": "Performance"
        },
        {
          "value": "stability",
          "text": "Stability"
        },
        {
          "value": "ui",
          "text": "User interface"
        },
        {
          "value": "complete-functionality",
          "text": "Complete functionality"
        },
        {
          "value": "learning-materials",
          "text": "Learning materials (documentation, demos, code examples)"
        },
        {
          "value": "support",
          "text": "Quality support"
        }
      ],
      "showOtherItem": true,
      "otherPlaceholder": "Please specify...",
      "otherText": "Other features",
      "colCount": 2,
      "maxSelectedChoices": 3
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/angular.md)
- [React](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/jquery.md)