javascript - Using toggleClass in jQuery to shrink a div -

i have div , i'm trying shrink when click button. , when click again, want original size. i'm using toggleclass this, did wrong code, , i'm not sure where. please take look. thanks.

//********************************************************************* <style>      div {     border: 1px solid black;         width: 500px;     height: 500px;       }     .shrink {     width: 250px;     height: 250px;     }     </style>  //*********************************************************************    <button type = "button"> click me </button> <div> can tell me secret? </div>  //*********************************************************************  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type = "text/javascript">     $(document).ready($function {  $("button").click(function(){     $("div").toggleclass("shrink"); });                 });  </script> //********************************************************************* 

it's kind of typo. wrote "$function {" mean this:

$(document).ready(function() { 

the rest fine. also, document ready can expressed in shorter form:

$(function() {     ...     ... }); 

maybe confused two. did few times too, in beginner days :)