javascript - Hiding and showing div in Jquery -

Click on a button I want to click on a div. Here I have 2 Divisions (Login and Container). When the page loads, the container will be hidden and click on the #submit button, I want to show the container divis and hide the login dish.

The problem is now the page now when the page is loading, but I can not hide or show div on the button

Javascript:

  & lt; Script & gt; Click $ ('# Submit') (function () {console.log ("called2") $ ('# container'). Show (); $ ('# login'). Hide ();}); & Lt; / Script & gt;   
 HTML:  
  & lt; Div id = "login" & gt; & Lt; Div id = "loginformcontainer" & gt; & Lt; Form & gt; & Lt; Label & gt; Username: & lt; Input type = "text" name = "uname" & gt; & Lt; / Labels & gt; & Lt; Label & gt; Password: & lt; Input type = "password" name = "pwd" & gt; & Lt; / Labels & gt; & Lt; Div class = "buttons1" & gt; & Lt; Button type = "button" id = "submit" value = "login" class = "btn" & gt; & Lt; / Button & gt; Submit & lt; Button type = "reset" id = "reset" value = "reset" category = "btn" & gt; Clear all & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Div id = "container" style = "display: none;" & Gt; & Lt; P & gt; Index page & lt; / P & gt; & Lt; / Div & gt;    
 
 
 Type your code  write document.ready function  work, (Function () {console.log ("called2") $ ('# container') $ (document) $ (document) .ready (function () {$ ('# submit' ). Show (); $ ('# login') Hide ();});}); Or   
 or, its shortcut,  
  $ (function () {$ ('# submit') click (function () {console.log ( "Called2") $ ('# container'). Show (); $ ('# login') Hide ();});});   
 To change your visibility, like every time you type the  toggle () function,  
  $ (function () { $} ('#submit') (function () {console.log ("called2") $ ('# container, #login'). Toggle ();});});