jquery - how to change input type with onclick event in javascript -

i have check box , text box in same row. type of text box hidden, when click check box type of text box should change hidden text. if unchecked should change type text hidden. how can this? here code:

 <div class="row">             <div class="col-xs-6 col-sm-6 col-md-6">                 <div class="form-group">             <input type="checkbox" name="customer_web" value="yes" style="float:left;">  <h4 align="left" style="font-size:16px; margin-left:20px !important;">web designing</h4>                 </div>             </div>             <div class="col-xs-6 col-sm-6 col-md-6">                 <div class="form-group">                 <input type="hidden" name="web_designing_details" placeholder="web designing details" class="form-control input-md" >                  </div>             </div>   </div> 

change type of text box hidden text.

html

<input type="text" name="web_designing_details" placeholder="web designing details" class="form-control input-md hidden" > 

jquery/javascript

$(document).ready(function(){        $('input[name=web_designing_details]').hide();    $('input[name=customer_web]').change(function(){      if( $(this).is(":checked"))     {       $('input[name=web_designing_details]').hide();     }       else     {       $('input[name=web_designing_details]').show();     }   }); });