Show divs based on radio buttons
<p>My radio buttons:</p>

<pre><code>&lt;input type="radio" name="radio-269" value="Purchase Only" /&gt;
&lt;input type="radio" name="radio-269" value="Sale Only" /&gt;
&lt;input type="radio" name="radio-269" value="Purchase and Sale" /&gt;
</code></pre>

<p>Then my divs:</p>

<pre><code>&lt;div id="sale"&gt;
SALE!
&lt;/div&gt;

&lt;div id="purchase"&gt;
PURCHASE!
&lt;/div&gt;
</code></pre>

<p>Finally my javascript at the moment:</p>

<pre><code>&lt;script&gt;
$("input[name='radio-269']").change(function() {
    if ($(this).val() == "Purchase and Sale") {
       $('#purchase').removeClass("hidden");
    }
    else {
        $('#purchase').addClass("hidden");
    }
    if ($(this).val() == "Purchase Only" || $(this).val() == "Sale Only") {
       $('#purchase').removeClass("hidden");
    }
    else {
        $('#purchase').addClass("hidden");
    }
});
&lt;/script&gt;
</code></pre>

<p>How do I change it so the following occurs:</p>

<ul>
<li>When radio "Purchase only" is shown, only div id "purchase" is
visible </li>
<li>When radio "Sale only" is shown, only div id "sale" is
visible </li>
<li>When radio "Purchase and Sale" both div id "purchase" and
"sale" are visible</li>
</ul>

<p>Would someone please show me the best way of modifying my javascript to achieve this?</p>
