Clicking a button to show associated content
<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>
