<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" />
           <input type="text" id="userPassword" class="form-control input-sm chat-input" placeholder="password" />
      <div class="wrapper">
       <span class="group-btn">     
        <a href="#" class="btn btn-primary btn-md">login <i class="fa fa-sign-in"></i></a>

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