CODEWITHSUNDEEP
javascriptjquery
Hero Stripe
Hero Stripe

Reputation: 89

Need to add 2 more divs

I need to add 2 more divs on this fiddle

When i add it it don't work.. it show text below and evrything is wrong. Do you know how to add 2 more options

$(document).ready(function () {
    $('#div1,#div2').hide();
    $('#id_radio1').click(function () {
        $('#div2').hide('fast');
        $('#div1').show('fast');
    });
    $('#id_radio2').click(function () {
        $('#div1').hide('fast');
        $('#div2').show('fast');
    });
});

Upvotes: 1

Views: 96

Answers (3)

Freelance PHP Programmer
Freelance PHP Programmer

Reputation: 370

Here i have modified your code to infinite number of radio buttons using class instead ID. hope this helps:

FIDDLE: http://jsfiddle.net/94mW8/24/

usage:

1: give a unique id to input radios.

2: create an element, let's say div with attribute data-id and use same value inside as input radio.

3: hide this element with data-id attribute using CSS and it should popup as you click on radio button.

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115212

Try this simplified code using attribute selector,

JQUERY :

$(document).ready(function() {
    $('[id^=div]').hide();
    $('[id^=id_radio]').click(function() {
        $('[id^=div]').hide('fast');
        $('#div' + this.id.slice(-1)).show('fast');
    });
});

HTML :

<center>
    <h2>show hide div on click using jquery</h2>
    <div style="padding:25px;width: 100px;">
        <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1" />Radio1
        <br />
        <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2" />Radio2
        <br />
        <input id="id_radio3" type="radio" name="name_radio1" value="value_radio2" />Radio3
        <br />
        <input id="id_radio4" type="radio" name="name_radio1" value="value_radio2" />Radio4
    </div>
    <div align="center" style="padding:25px;width: 300px;">
        <div id="div1">This is First (1st) division</div>
        <div id="div2">This is Second (2nd) division</div>
        <div id="div3">This is Second (3rd) division</div>
        <div id="div4">This is Second (4th) division</div>
    </div>
</center>

Fiddle Demo

Upvotes: 5

Manoj
Manoj

Reputation: 56

/** HTML Code i added two more div. But i put all div's in div **/

<center>
             <h2>show hide div on click using jquery</h2>
              <div style="padding:25px;width: 100px;">
                   <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1" />Radio1
                  <br />
                   <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2" />Radio2
              </div>
              <div align="center" style="padding:25px;width: 300px;">
                  <div class="divClass">
                   <div id="div1">This is First (1st) division</div>
                   <div id="div2">This is Second (2nd) division</div>
                       <div id="div3">This is third (3rd) division</div>
                       <div id="div4">This is fourth (4th) division</div>
                      </div>
              </div>
     </center>

/** some modification in jquery **/

$(document).ready(function () {
         $('.divClass div').hide();
                    $('#id_radio1').click(function () {
                       $('.divClass div').hide('fast');
                       $('#div1').show('fast');
                        $('#div3').show('fast');
                });
                $('#id_radio2').click(function () {
                      $('.divClass div').hide('fast');
                       $('#div2').show('fast');
                        $('#div4').show('fast');
                 });
});

Upvotes: 0

Related Questions