Hide Other Textbox Until Option is Clicked

In this tutorial we'll cover how to display an Other Textbox in a Radio Button or Checkbox question only after the associated answer option has been clicked. Many users want their survey to be as clean as possible. Only showing an other field after being clicked can help your survey seem a little cleaner and a little less daunting.

Please note that this script is compatible with multiple 'other, write in' fields in the same question.

Check it out in an example survey.

OR

Add a survey with this setup to your account!

Setup

Go to the Style tab and scroll to the bottom of the survey preview to access the link to the HTML/CSS Editor. Paste the code below at the bottom of your HTML. 

<script type="text/javascript">
    $(function() {
        var $otherLi = $('.sg-other-li');
        $otherLi.find('.sg-other').hide();

        $otherLi.parents('ul').find('li > input').change(function() {
            $option_list = $(this).parents('ul');
            $option_list.children('li.sg-other-li').each(function() {
                if ($(this).children('input').is(':checked')) {
                    $(this).find('.sg-other').show();
                } else {
                    $(this).find('.sg-other').hide();
                }
            })
        })
    });
</script>

Testing Time!

It's time to test your survey. Pull up your radio button question. You should only see your other option. Now click on the other option. Viola! Upon clicking you should see your other textbox pop up.

Considerations

This script works best if the associated question is on its own survey page. If a page reload is triggered (perhaps by an unanswered required question), the other text box will be hidden again and the respondent will be forced to re-select the answer option to show it.