title: How can I toggle showing these two elements with jQuery?
body: <p>So, I composed a quick jQuery function to give an idea of what I am looking for specifically, if anyone can help me solve this issue. I read a few posts on getting one element to hide while another shows. I don't have much experience on jQuery, so I apologize in advance. What I did find was that you can have both call simultaneously, or you could use the second statement as a callback. I'm really only looking for something that will toggle the displays of the two with a moderate fade. I have in mind that I don't want the triangles to move, it should be as if the text is just changing inside the triangle. But what I have here doesn't seem to be effective.
  I want to have the second triangle hidden on page load, but I cannot get it to, and I also cannot get the first triangle to hide on click. I am just seeking a quick fix for the issue. Thanks in advance.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="buttons"&gt;
      &lt;div class="container"&gt;
          &lt;div class="button1"&gt;&lt;p&gt;1&lt;/p&gt;&lt;/div&gt;
          &lt;div class="button2"&gt;&lt;p&gt;2&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Accompanied with the jQuery function:</p>
  
  <pre><code>$(window).load(function(){
      $('.button2').hide();
  });
  $('.button1').click(function(){
      $('.button1').hide();
      $('.button2').show();
  });
  $('.button2').click(function(){
      $('.button2').hide();
      $('.button1').show();
  });
  </code></pre>
  
  <p>With a bit of CSS:</p>
  
  <pre><code>.buttons{
      width:100%;
  }
  .buttons .container{
      text-align:center;
  }
  .button1, .button2{
      display:inline-block;
      width:0;
      height:0;
      border-left:40px solid transparent;
      border-right:40px solid transparent;
      border-top:40px solid #CC0000;
      cursor:hand; cursor:pointer;
  }
  .button1 p, .button2 p{
      position:absolute;
      color:#F9F9F9;
      z-index:9999;
      margin-top:-30px;
      margin-left:-2px;
      font-size:7px;
  }
  </code></pre>
  
  <p>and here is a <a href="http://jsfiddle.net/4cWH3/3/" rel="nofollow">jsfiddle</a> if anyone would like to change anything.</p>