title: Javascript hide/show function
body: <p>Im trying to create a login/register system/menu for a html5/js game im programming.</p>
  
  <p>At the moment i have set up the html page with the different divs ill be using for the menu.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;TBG basic structure&lt;/title&gt;
  &lt;script src="JS/jquery-1.7.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="JS/game.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="CSS/style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;section id="wrapper"&gt;
  &lt;header&gt;
      &lt;h1&gt;&lt;img src="images/title.png" width="467" height="184"/&gt;&lt;/h1&gt;
  
  &lt;/header&gt;
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Leagues&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;article id="container"&gt;
      &lt;div id="load-new"&gt;
          &lt;p&gt;LOAD/NEW&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="reg"&gt;
          &lt;p&gt;REGISTER&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="login"&gt;
          &lt;p&gt;LOGIN&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="access"&gt;
          &lt;p&gt;ACCESS&lt;/p&gt;
          &lt;button id="login-but" onclick="login2()"&gt;Login&lt;/button&gt;
          &lt;button id="reg-but" onclick="register()"&gt;Register&lt;/button&gt;
      &lt;/div&gt;
      &lt;canvas id="TBG" width="640" height="416"&gt;
          Please use a more up to date browser
      &lt;/canvas&gt;
      &lt;div id="GUI"&gt;
          &lt;div id="health"&gt;
              &lt;p&gt;&lt;img src="images/heart.png"/&gt;: &lt;span class="gameHealth"&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;div id="energy"&gt;
              &lt;p&gt;&lt;img src="images/energy.png"/&gt;: &lt;span class="gameEnergy"&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="table_container"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically i want to use javascript/jquery to hide show the correct parts of the menu due to users decisions.</p>
  
  <p>So the first div the user will see is the access div which will give the user 2 options, "login" or "register" as you can see with the buttons within the access div above.</p>
  
  <p>Basically i want my JS to hide the access div when one of the buttons are pressed and then either show the login div or reg div depending on which button the user pressed.</p>
  
  <p>Here is the Js i have at the moment:</p>
  
  <pre><code>$(document).ready(function(){
  
  var loadScr = $("#load-new");
  var regScr = $("#reg");
  var loginScr = $("#login");
  var accessScr = $("#access");
  
      loadScr.hide();
      regScr.hide();
      loginScr.hide();
  
      function login()
      {
          accessScr.hide();
          loginScr.show();
      }
  
      function register()
      {
          accessScr.hide();
          regScr.show();
      }
  
  });
  </code></pre>
  
  <p>It seems as though the onclick function of the buttons isnt interacting with the JS. i know this because i placed an alert which just said test in the login function which is called when the user clicks login button but i had no response back.</p>
  
  <p>Am i doing something rather silly?</p>
  
  <p>Thanks</p>