<form class="login">
  <div class="col-md-14">
    <ul class="list-group">
     <li class="list-group-item">
      <a href="#" id="teach_click" ><img src="icons/teach.png<Strong>Teacher</Strong></a></li>
      <div id="teacher_login">
        <div class="form-login">
         <input type="text" id="userName" class="form-control input-sm chat-input" placeholder="username" />
          </br>
           <input type="text" id="userPassword" class="form-control input-sm chat-input" placeholder="password" />
          </br>
      <div class="wrapper">
       <span class="group-btn">     
        <a href="#" class="btn btn-primary btn-md">login <i class="fa fa-sign-in"></i></a>
         </span>
        </div>
       </div>
     </div>
    <script>
    $(document).ready(function(){
      $("#teach_login").hide();
      $("#teach_click").click(function(){
      $("#teach_login").show();
      });
    });
    </script>

i have run this code perfectly without bootstrap, i dont know what i'm doing wrong that .show() / .hide() funtions are not running on bootstrap help i have pulled my all hairs almost out, i have checked the basic things like spellings are correct or not, js files are included or not but i didnt find any kind of basic mistakes