title: display different div when click buttons
body: <p>I am trying to accomplish a page which has two buttons on the bottom. Clicking each of these buttons will bring out different content.
  For example:</p>
  
  <pre><code>&lt;div id="page1"&gt;...some content...&lt;/div&gt;
  &lt;div id="page2"&gt;...some content...&lt;/div&gt;
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>#page1 { display: block;}
  #page2 { display: none;}
  </code></pre>
  
  <p>And the buttons are images:</p>
  
  <pre><code>&lt;div id="button1"&gt;&lt;img src="images/button1.png"/&gt;&lt;/div&gt;
  &lt;div id="button2"&gt;&lt;img src="images/button2.png"/&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I am using javascript to make the buttons work. <code>#block</code> is an object that moves when the buttons are clicked:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
      $(document).ready(function () {
          $("#button1").click(function () {
              $("#block").animate({
                  left: "10px"
              });
              $("#page1").attr("display", "block");
              $("#page2").attr("display", "none");
          });
          $("#button2").click(function () {
              $("#block").animate({
                  left: "100px"
              });
              $("#page1").attr("display", "none");
              $("#page2").attr("display", "block");
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>So when <code>#button1</code> is clicked:<br>
  <code>#page1</code> will be changed to <code>display:block;</code><br>
  <code>#page2</code> will be changed to <code>display:none;</code> - hidden<br>
  <br>
  When <code>#button2</code> is clicked:<br>
  <code>#page1</code> will be changed to <code>display:none;</code> - hidden<br>
  <code>#page2</code> will be changed to <code>display:block;</code><br>
  This means it will show the content on <code>page2</code><br></p>