javascript - hide and show div with jquery not working -

i trying hide div show user click on drop downlist not working jquery

<div class="form-group">     <label>select course</label>     <select name="timepass" class="custom-select">         <option>select</option>         <option id="cour">php developer</option>         <option>asp.net</option>         <option>python</option>     </select> </div> <div class="mj_tabcontent mj_bottompadder80" id="std-list">     <table class="table table-striped">         <tr>             <td>                 <h4><a href="requirement_detail.html">mudassir abbas</a></h4>             </td>             </td>             <td>                 <div class="col-xs-2">                     <input type="text" placeholder="grade" class="grade">                 </div>             </td>         </tr>             <td>                 <h4><a href="job_detail.html">ziab u nisa</a></h4>             </td>             <td>                 <div class="col-xs-2">                     <input type="text" placeholder="grade" class="grade">                 </div>             </td>         </tr>         </tr>             <td>                 <h4><a href="job_detail.html">raja m.waleed</a></h4>             </td>             <td>                 <div class="col-xs-2">                     <input type="text" placeholder="grade" class="grade">                 </div>             </td>         </tr>     </table> </div> 

---

java script code   <script>     $($document).ready(function(){     $("#std-list").hide();      $("#cour").click( function(){     $("#std-list").show();     });     });     </script> 

$(document).ready(function(){      $("#hide").click(function(){          $("p").hide(1000);      });      $("#show").click(function(){          $("p").show(1000);      });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    <p>if click on "hide" button,<br> disappear.</p>    <button id="hide">hide</button>  <button id="show">show</button>