Show/Hide an input field depends on the selected option

Question

I wanted to show the input field if the the selected option is "Married" but if the selected option is "Single", the input field will hide.

Here's my code:

<div class="form-group">
                            <label for="civil_status">Civil Status</label>
                            <select class="form-control" id="civil_status" name="civil_status">
                                @if ($edit)<option value="{{ $user->civil_status}}">{{ $user->civil_status }}</option>@endif
                                <option value="Single">Single</option>
                                <option value="Married">Married</option>
                                <option value="Widowed">Widowed</option>
                                <option value="Divorced">Divorced</option>
                            </select> 
                        </div>
            <div id="row1_col1_layout_type2" class="content">
                <div class="form-group">
                    <label for="spouse">Spouse</label>
                    <input type="text" class="form-control" id="spouse"
                           name="spouse" placeholder="Spouse" value="{{ $edit ? $user->spouse : '' }}">
                </div>
            </div>

Then for my script it goes like this

<script>
$('#civil_status').change(function() {
    var i= $('#civil_status').val();

            if(i=="Single") // equal to a selection option
             {
                 $('.content').hide();
             }
           elseif(i=="Married")
             {
              $('.content').show();

              }
   $.ajax({

   });
}).change();
</script>