title: Clicking a button to show associated content
body: <p>I have four "Learn More" buttons, and each of them has an associated paragraph of content. Each of the paragraphs will be hidden at the start, then I want it so that when one of the buttons is clicked, the paragraph of associated content is shown. Then, if a different button is clicked, the paragraph currently shown is hidden and the paragraph of content associated with the second button clicked is shown.</p>
  
  <p>I'm having trouble figuring out what the best way to accomplish this with jQuery is.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;button class="learn-more"&gt;Learn More&lt;/button&gt;
  &lt;button class="learn-more"&gt;Learn More&lt;/button&gt;
  &lt;button class="learn-more"&gt;Learn More&lt;/button&gt;
  &lt;button class="learn-more"&gt;Learn More&lt;/button&gt;
  
  &lt;p&gt;First paragraph&lt;/p&gt;
  &lt;p&gt;Second paragraph&lt;/p&gt;
  &lt;p&gt;Third paragraph&lt;/p&gt;
  &lt;p&gt;Fourth paragraph&lt;/p&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>p {
    display: none;        
  }
  </code></pre>
  
  <p>And here's a JSFiddle with this code: <a href="http://jsfiddle.net/cYFy3/3/" rel="nofollow">http://jsfiddle.net/cYFy3/3/</a></p>