Multiple radio buttons to show/hide div
<p>I have 4 radio buttons and I need to show a specific div based on which is clicked and make sure the other 3 remain hidden, etc for all 4. I can only find code to make 2 work but not 4.</p>

<p>Does anyone have an example how to do this?
Just as a test I have</p>

<pre><code>&lt;div id=onestyle=display:none&gt; 1 &lt;/div&gt;
&lt;div id=two style=display:none&gt; 2 &lt;/div&gt;
&lt;div id=three style=display:none&gt; 3 &lt;/div&gt;
&lt;div id=four style=display:none&gt; 4 &lt;/div&gt;
</code></pre>

<p>but cannot find something to sort out doing it with all of them.</p>

<p>Buttons are just basic in place to test right now:</p>

<pre><code>&lt;div data-biller="standard" class="membership-plan "&gt;
&lt;label for="option_2624" id="tt-2624"&gt;
&lt;input value="12" id="option_2624" name="signup[optionid]" type="radio" checked="checked"&gt;
&lt;span class="duration" style="float:left; "&gt;&lt;var class="" ref=""&gt; 12&lt;br&gt;&lt;/span&gt;&lt;/label&gt;
&lt;/div&gt;


&lt;div data-biller="standard" class="membership-plan "&gt;
&lt;label for="option_2429" id="tt-2429"&gt;
&lt;input value="6" id="option_2429" name="signup[optionid]" type="radio"&gt;
&lt;span class="duration" style="float:left; "&gt;&lt;var class="" ref=""&gt; 6 &lt;br&gt;&lt;/span&gt;&lt;/label&gt;
&lt;/div&gt;


&lt;div data-biller="standard" class="membership-plan "&gt;
&lt;label for="option_1554" id="tt-1554"&gt;
&lt;input value="3" id="option_1554" name="signup[optionid]" type="radio" &gt;
&lt;span class="duration" style="float:left; "&gt;&lt;var class="" ref=""&gt; 3 &lt;br&gt;&lt;/span&gt;&lt;/label&gt;
&lt;/div&gt;


&lt;div data-biller="standard" class="membership-plan "&gt;
&lt;label for="option_1697" id="tt-1697"&gt;
&lt;input value="1" id="option_1697" name="signup[optionid]" type="radio"&gt;
&lt;span class="duration" style="float:left; "&gt;&lt;var class="" ref=""&gt; 1&lt;br&gt;&lt;/span&gt;&lt;/label&gt;
&lt;/div&gt;
</code></pre>
