title: Javascript show element, hide element on page load. But it reverts
body: <p>On page load I want to hide element <code>#buttonSaveArea</code>, show element <code>#buttonSaveShower</code>. Upon a click on <code>#buttonSaveShower</code>, it should hide, and <code>#buttonSaveArea</code> should appear. </p>
  
  <p>The problem is, <code>$(document).ready</code> is called again and again. How to get around it? Also, when JavaScript is disabled, I would like just <code>#buttonSaveArea</code> to be visible right from the start.</p>
  
  <pre><code>$(document).ready(function(){
    $("#buttonSaveArea").hide();
  
    $("#buttonSaveShower").click(function(){
      $("#buttonSaveArea").fadeIn();
      $("#buttonSaveShower").hide();
    });
  });
  
  
  &lt;!------ The element that should show the button below ----------------&gt;
  &lt;div class="button" id="buttonSaveShower" style="clear:both; margin-top:15px;"&gt;
      &lt;a href="" style="width:50px !important;"&gt; edytuj &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!------ Button: save ----------------&gt;
  &lt;div class="fbCenter" id="buttonSaveArea"&gt;
      &lt;input type="submit" value="Zapisz" class="formButton"
         onmouseover="this.className+=' pressed'"
         onmouseout="this.className=this.className.replace(' pressed', '')"
      /&gt;
  &lt;/div&gt;
  </code></pre>