根据复选框显示/隐藏输入字段[重复]

如果单击该复选框，它将显示一个输入字段...到目前为止它正在工作，但如果未选中该复选框，它应该隐藏它，我该怎么做？

    <div class="checkbox"> 
    <label class="checkbox-custom"> 
    <input type="checkbox" name="clases" id="clases" value="yes">
    <i class="fa fa-fw fa-square-o"></i> Doy clases particulares/grupales
    </label> 
    </div>


    <div class="input" id="descripcion">
    <label for="exampleInputEmail1">Descripcion</label>
   <textarea type="textarea" rows="7" cols="" class="form-control"  name="descripcion" placeholder="" required></textarea>
    </div>

这是脚本

    <script type="text/javascript">
    $(document).ready(function () {
     $("#descripcion").hide();
    $("#clases").click(function () {
    $("#descripcion").show();
    });
    });
    </script>  

$("#clases").change(function () {
   $("#descripcion").toggle();
});