div display based on button
<p>I have a jsfiddle below:</p>

<p><a href="http://jsfiddle.net/Jsh2V/10/" rel="nofollow">http://jsfiddle.net/Jsh2V/10/</a></p>

<p>The first sets of test buttons ("show it" and "hide it") work great.  I have been trying to get the second set of buttons ("Have it" and "Need it") to do the same thing with a div.  Not working. Any suggestions?  Also, if theres a more efficient way to do this...</p>

<p>Here the code from the Fiddle:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
      p { background:yellow; }
      &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;button class="1"&gt;Show it&lt;/button&gt;
  &lt;button class="2"&gt;Hide it&lt;/button&gt;

      &lt;p style="display: none" class="1"&gt;Hello&lt;/p&gt;
      &lt;p style="display: none" class="2"&gt;Un Hello!&lt;/p&gt;
&lt;script&gt;
    $("button.1").click(function () {
    $("p.1").show("slow");
    $("p.2").hide("fast");
    });
&lt;/script&gt;
&lt;script&gt;
    $("button.2").click(function () {
    $("p.1").hide("fast");
    $("p.2").show("slow");
    });
&lt;/script&gt;


    &lt;button class="have"&gt;Have&lt;/button&gt;
    &lt;button class="need"&gt;Need&lt;/button&gt;

    &lt;div id="have" style="display: none"&gt;HAVE YO&lt;/div&gt;
    &lt;div id="need" style="display: none"&gt;NEED YO&lt;/div&gt;
&lt;script&gt;
    $("button.have").click(function () {
    $("div.have").show("slow");
    $("div.need").hide("fast");
    });
&lt;/script&gt;
&lt;script&gt;
    $("button.need").click(function () {
    $("div.need").show("slow");
    $("div.have").hide("fast");
    });
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
