Change content based on radio button selected
<p>Here are my radio buttons:</p>

<pre><code>&lt;div style="float: left; margin-top: 35px; margin-left: 38px;"&gt;
    &lt;input type="radio" name="cat" class="styled" value="jersey" /&gt;
&lt;/div&gt;
&lt;div style="float: left; margin-left: 58px; margin-top: 35px;"&gt;
    &lt;input type="radio" name="cat" class="styled" value="shorts" /&gt;
&lt;/div&gt;
&lt;div style="float: left; margin-left: 58px; margin-top: 35px;"&gt;
    &lt;input type="radio" name="cat" class="styled" value="shirts" /&gt;
&lt;/div&gt;
&lt;div style="float: left; margin-left: 58px; margin-top: 35px;"&gt;
    &lt;input type="radio" name="cat" class="styled" value="reversible" /&gt;
&lt;/div&gt;
&lt;div style="float: left; margin-left: 88px; margin-top: 35px;"&gt;
    &lt;input type="radio" name="cat" class="styled" value="outerwear" /&gt;
&lt;/div&gt;
&lt;div style="float: left; margin-left: 88px; margin-top: 35px;"&gt;
    &lt;input type="radio" name="cat" class="styled" value="helmets" /&gt;
&lt;/div&gt;
&lt;div style="float: left; margin-left: 68px; margin-top: 35px;"&gt;
    &lt;input type="radio" name="cat" class="styled" value="other" /&gt;
&lt;/div&gt;
</code></pre>

<p>I've tried multiple jquery solutions where if a certain radio button is selected, it will display unique content for that radio button. However, all of my attempts have failed and I am really not sure why (I do have other jquery scripts running, maybe conflicts?)</p>

<p><strong>So, for example...</strong></p>

<p>If radio button <code>"cat"</code> has a value of <code>"helmets"</code> selected, I'd like to display the content for <code>helmets</code>. If the value is changed to <code>"other"</code>, let's do away with <code>helmets</code> and display the content for <code>"other"</code>.</p>

<p>Thanks for any help!</p>
