Menu slide in/out isn't working! Need help!

Menu slide in/out isn't working! Need help!

Hey. I followed everything on doing a menu slide in and slide out from the left side. But it is not working if i click on the menu icon. Could you please help me?

index.html
  2. <!doctype html>
  3.   <html>

  5.     <head>
  6.       <title>Testpage</title>
  7.       <link href="style.css" rel="stylesheet" type"text/css" />
  8.     </head>

  10.     <body>
  11.       <header>
  12.         <div id="sidebar-btn">
  13.           <span></span>
  14.           <span></span>
  15.           <span></span>
  16.         </div>
  17.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  18.         <script tpye="text/javascript">

  20.         $(document).ready(function(){
  21.           $('#sidebar-btn').click(function(){
  22.             $('#sidebar').addClass('visible');
  23.         });
  24.         </script>
  25.       </header>
  26.       <div id="sidebar">
  27.         <ul>
  28.           <li><a href="#">Home</a></li>
  29.           <li><a href="#">About</a></li>
  30.           <li><a href="#">Portfolio</a></li>
  31.           <li><a href="#">Blog</a></li>
  32.         </ul>
  33.       </div>
  34.     </body>

  36.   </html>

style.css
  2. body {
  3.   background: #f3f3f3;
  4.   margin: 0;
  5.   padding: 0px;
  6.   font-family: "helvetica neue";
  7. }

  9. header {
  10.   background: white;
  11.   color: white;
  12.   padding: 20px;
  13.   box-shadow: 0px 0.5px 8px #C6C6C6;
  14.   position:static;
  15. }

  17. ul {
  18.   margin: 0px;
  19.   padding: 0px;
  20. }

  22. ul li{
  23.   list-style: none;
  24. }

  26. ul li a{
  27.   color: #f3f3f3;
  28.   text-decoration: none;
  29.   display: block;
  30.   width: 180px;
  31.   padding: 10px;
  32. }

  34. div {

  36. }

  38. #sidebar {
  39.   background: #333;
  40.   width: 200px;
  41.   height: 100%;
  42.   display: block;
  43.   position: absolute;
  44.   left: -200px;
  45.   top: 0px;
  46.   transition: left 0.3s linear;
  47. }

  49. #sidebar.visible {
  50.   left: 0px;
  51.   transition: left 0.3s linear;
  52. }

  54. #sidebar-btn {
  55.   display: inline-block;
  56.   vertical-align: middle;
  57.   width: 20px;
  58.   height: 15px;
  59.   cursor: pointer;
  60.   margin: 15px;
  61. }

  63. #sidebar-btn span {
  64.   height: 2px;
  65.   background: #333;
  66.   margin-bottom: 4px;
  67.   display: block;
  68. }

  70. footer {
  71.   color: black;
  72.   margin: 1%;
  73.   float: right;
  74.   clear: both;
  75. }