Jquery show method ?

Jquery show method ?

I am trying to using the div named hid , I have used the form statements in the div and I have hidden the div tag using css and I have used a button when I click the button then hidden div element should be shown, But I am not able to show the result after clicking on the button element too . can any one help me in finding the solution for the answer.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="bootstrap/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>Registration form</title>
      <style>
      #hid
          {
              display: none;
          }
      </style>
  </head>

  <body>
    <button id="reg" type="submit" class="btn"> Register</button>
      <div id="hid">
  <form class="form-inline">
          <div class="form-group">
        <label for="email">Email : </label>
          <input type="email" id="email" class="form-control">
          </div>
          <div class="form-group">
        <label for="password">Password:</label>
          <input type="password" id="password" class="form-control">
              </div>
          <button type="submit" class="btn">Login</button>
          <br> <br> <br>
        </form>
      </div>
     
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/bootstrap/js/bootstrap.min.js"></script>
      <script>
      $(document).ready(function()
                       {
          $("#reg").click({
         
            $("#hid").show(); 
      });
      </script>
  </body>

</html>