Javascript show element, hide element on page load. But it reverts
<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>
