CODEWITHSUNDEEP
javascriptjqueryhtml
Sander
Sander

Reputation: 1401

dynamically hiding and showing divs

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..

Upvotes: 0

Views: 493

Answers (9)

Neil N
Neil N

Reputation: 25258

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

Upvotes: 6

Buddy Lee
Buddy Lee

Reputation: 376

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.

Upvotes: 0

jamesmhaley
jamesmhaley

Reputation: 45459

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!

Upvotes: 0

martincarlin87
martincarlin87

Reputation: 11042

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

});

Upvotes: 0

Chris Schmitz
Chris Schmitz

Reputation: 8247

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

Upvotes: 0

Maxx
Maxx

Reputation: 4072

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

Upvotes: -1

banners
banners

Reputation: 454

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

Upvotes: 4

Schroedingers Cat
Schroedingers Cat

Reputation: 3129

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

Upvotes: 0

Soren
Soren

Reputation: 14688

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.

Upvotes: 0

Related Questions