dynamically hiding and showing divs

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();
});

Answer 2

the solution is in  jQuery

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

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

    $('#button-1').click(function(){
    $('.c1').show();
    $('.c2').hide();
    })

    $('#button-2').click(function(){
    $('.c2').show();
    $('.c1').hide();
    })

Answer 3

Try to use the following parts from jquery

$('#button-1').click(function(){.... your code here .... });
$('#button-2').click(function(){.... your code here .... });

and

$('#div-1').show();

and

$('#div-2').hide();

and when you put it all together it will all work.

Answer 4

JQuery - click methods. Hide the relevant divs in the function, which will hide them whatever their state.

Answer 5

Try this:

$('#button-1').select(function() {
    $('#div-1, #div-2, #div-5').show();
    $('#div-3, #div-4, #div-6, #div-7').hide();
});

$('#button-2').select(function() {
    $('#div-1, #div-2, #div-5').hide();
    $('#div-3, #div-4, #div-6, #div-7').show();
});

Answer 6

JSFiddle seems to be slow but I think this should work:

http://jsfiddle.net/nfypC/4/

$('#div-1').hide();
$('#div-2').hide();
$('#div-3').hide();
$('#div-4').hide();
$('#div-5').hide();
$('#div-6').hide();
$('#div-7').hide();

$("#button-1").click(function () {
    $('#div-1').show();
    $('#div-2').show();
    $('#div-5').show();

    $('#div-3').hide();
    $('#div-4').hide();
    $('#div-6').hide();
    $('#div-7').hide();

});

$("#button-2").click(function () {
    $('#div-1').hide();
    $('#div-2').hide();
    $('#div-5').hide();

    $('#div-3').show();
    $('#div-4').show();
    $('#div-6').show();
    $('#div-7').show();

});

Answer 7

This is relatively basic to do. As others are suggesting, i would suggest using a third party javascript library like jQuery or PrototypeJs.

If you choose jQuery, the following pages should help you out: http://api.jquery.com/show/ , http://api.jquery.com/hide/ and http://docs.jquery.com/Main_Page

If you choose PrototypeJS: http://www.prototypejs.org/api/element/show , http://www.prototypejs.org/api/element/hide and http://www.prototypejs.org/learn .

In future, I would recommend you visit these resources first as most of the answers here are making use of libraries like this.

Also, these libraries do ALOT. Really worth getting to know them!

Answer 8

First, what do you mean by dynamically? You'll have to code the relationship somewhere.

What you add a custom attribute to your divs like:

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

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

Then you could have a single onclick event that would take the id of the button you click, show all divs where linktoButton="button-1' and hide the rest.

You can use the "Has Attribute" selector in jQuery http://api.jquery.com/has-attribute-selector/

Just remember that this way will have to walk through every element in the dom and may be slow. You may want to have a container div that you can get by ID and just use the attribute selector within the children.

Hope this points you in the right direction, and remember, there's 100 ways to skin this cat.

Answer 9

<input type="radio" onclick="hideDivOneTwoAndFiveAndShowThreeFourSixAndSeven()" id="button-1" name="button" />Button 1
<input type="radio" onclick="showDivOneTwoAndFiveAndHideThreeFourSixAndSeven()" id="button-2" name="button" />Button 2

function hideDivOneTwoAndFiveAndShowThreeFourSixAndSeven(){
   $("#div-1,#div-2,#div-5").hide();
   $("#div-3,#div-4,#div-5,#div-7").show();
}

function showDivOneTwoAndFiveAndHideThreeFourSixAndSeven(){
   $("#div-1,#div-2,#div-5").show();
   $("#div-3,#div-4,#div-5,#div-7").hide();
}