Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Dependent Questions jQuery Plugin

Make a form question's visibility dependent on some other question simply by adding data-depends-on="inputName=value" to your wrapper HTML element. No other code required.

This plugin allows you to specify that a particular form question should only be made visible if the answer to a previous question is a specific value. It does this by making use of HTML5 data attributes. For example:

<form action="?" id="myform">
  <fieldset class="form-question">
    <legend>Would you like to see another question?</legend>
      <input type="radio" name="more" value="no" id="more-no"/>
      <label for="more-no">No</label>
      <input type="radio" name="more" value="yes" id="more-yes"/>
      <label for="more-yes">Yes</label>
  <fieldset data-depends-on="more=yes">
    <div class="form-question">
      <label for="extra">What else would you like to add?</label>
      <input type="text" name="extra" id="extra"/>

In the above example, the question "What else would you like to add?" would only be displayed when the first question is answered as "yes".

Note that the data-depends-on attribute refers to the form input name, not an ID.

To use plugin, add something like the following to your web page:

<script src=""></script>
<script src="jquery.dependent-questions.js"></script>


You can specify how the dependent questions are revealed by passing options to the plugin constructor. For example, if you would like the questions to fade in, rather than slide down, you could specify something like the following:

    effect: "fade",    // This can be 'fade' or 'slide'
    duration: "slow"   // This can be 'slow', 'fast', or a number of milliseconds


Development of this plugin was supported by Squiz.


A jQuery plugin for showing/hiding form elements based on the answers to previous questions.




No packages published