title: jQuery - Hide and show elements on click
body: <p>I want to make a bottom bar that usually displays "Contact us" but when the bar is clicked, it will then display the contact details, clicking again will turn the bar to just saying "Contact Us" again. I tried toggle() but that then left me in situations where both the Contacts us + and the details were hidden.</p>
  
  <p>I think I need an else statement, but my knowledge of jQuery is lackluster.</p>
  
  <p><a href="http://jsfiddle.net/DzYTZ/2/" rel="nofollow">http://jsfiddle.net/DzYTZ/2/</a> (Which for some reason it's not working on)</p>
  
  <p>Can anyone please help? </p>
  
  <h2>Thanks</h2>
  
  <pre><code>&lt;div class="footer2"&gt; 
      &lt;a href="#" class="contactus"&gt;
          Contact Us
      &lt;/a&gt;
  
      &lt;div class="more"&gt;
          &lt;a href="#"&gt;
              @twitterhandle
          &lt;/a&gt;
  
          &lt;a href="#"&gt;
              e-mail
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><P></p>
  
  <pre><code>    .footer2
  {
  background-color: black;
  margin-top: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center;
  width: 100%;
  }
      .footer2 .contactus
  {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      color: #e3e3e3;
      text-decoration: none;
      display: inline;
  }
      .footer2 .contactus:hover
  {
      color: white;
  }
      .footer2 .more
  {
      margin-left: 1em;
      display: none;
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      display: inline;
  }
      .footer2 .more a
  {
      margin-left: 2em;
      color: #e3e3e3;
      text-decoration: none;
  }
      .footer2 .more a:hover
  {
      color: white;
  }
  </code></pre>