Question

How can I achieve this dynamically using JavaScript?

onselect radio button 1: Shows div 1,2,5, hides (if not already hidden) divs 3,4,6,7

onselect radio button 2: Shows div 3,4,6,7, hides (if not already hidden) divs 1,2,5

<input type="radio" id="button-1" name="button" />Button 1
<input type="radio" id="button-2" name="button" />Button 2

<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>
<div id="div-5"></div>
<div id="div-6"></div>
<div id="div-7"></div>

edit I formulated my question poorly, will formulate it better when at home after work..

Answer 1

To make it easier on yourself, add a class to the two groups of radio buttons, something like divGroup1, divGroup2

    <div class="divGroup1" id="div-1"></div>
    <div class="divGroup1" id="div-2"></div>
    <div class="divGroup2" id="div-3"></div>
    <div class="divGroup2" id="div-4"></div>
    <div class="divGroup1" id="div-5"></div>
    <div class="divGroup2" id="div-6"></div>
    <div class="divGroup2" id="div-7"></div>

then in jQuery, do something like this:

$("#button-1").click(function()
{
    $(".divGroup1").show();
    $(".divGroup2").hide();
});

$("#button-2").click(function()
{
    $(".divGroup2").show();
    $(".divGroup1").hide();
});